@prestyj/cli 4.2.46 → 4.2.62

package/dist/ui/components/InputArea.js

@@ -1,14 +1,89 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useMemo } from "react";
-import { Text, Box, useInput, useStdout, useStdin } from "ink";
+import { Text, Box, useInput, useStdin } from "ink";
 import { useTheme } from "../theme/theme.js";
-import { useAnimationTick, deriveFrame } from "./AnimationContext.js";
+import { useAnimationTick, useAnimationActive, deriveFrame } from "./AnimationContext.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
 import { extractImagePaths, readImageFile, getClipboardImage } from "../../utils/image.js";
 import { SlashCommandMenu, filterCommands } from "./SlashCommandMenu.js";
+import { log } from "../../core/logger.js";
 const MAX_VISIBLE_LINES = 5;
 const PROMPT = "❯ ";
+// SGR mouse sequence: ESC [ < button ; col ; row M/m
+// M = press, m = release. Coordinates are 1-based.
+// SGR mouse sequence (global) — used both to strip sequences from input data
+// and to extract click coordinates. Must reset lastIndex before each use.
+// eslint-disable-next-line no-control-regex
+const SGR_MOUSE_RE_G = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g;
+// Enable/disable escape sequences for SGR mouse tracking.
+// ?1000h = basic click tracking, ?1006h = SGR extended mode (supports coords > 223).
+const ENABLE_MOUSE = "\x1b[?1000h\x1b[?1006h";
+const DISABLE_MOUSE = "\x1b[?1006l\x1b[?1000l";
+// Guard against stray SGR mouse sequences leaking into text input.
+// Some terminals or multiplexers send these even without mouse tracking enabled.
+function isMouseEscapeSequence(input) {
+    return input.includes("[<") && /\[<\d+;\d+;\d+[Mm]/.test(input);
+}
+// Option+Arrow escape sequences — terminals send these as raw input strings
+// rather than setting key.meta + key.leftArrow reliably.
+const OPTION_LEFT_SEQUENCES = new Set([
+    "\x1bb", // Meta+b (emacs style)
+    "\x1b[1;3D", // CSI 1;3 D (xterm with modifiers)
+]);
+const OPTION_RIGHT_SEQUENCES = new Set([
+    "\x1bf", // Meta+f (emacs style)
+    "\x1b[1;3C", // CSI 1;3 C (xterm with modifiers)
+]);
+/** Classify a character as word, punctuation, or space. */
+function charClass(ch) {
+    if (/\s/.test(ch))
+        return "space";
+    if (/\w/.test(ch))
+        return "word";
+    return "punct";
+}
+/** Find the start of the previous word from `pos` in `text`. */
+function prevWordBoundary(text, pos) {
+    if (pos <= 0)
+        return 0;
+    let i = pos - 1;
+    // Skip whitespace
+    while (i > 0 && charClass(text[i]) === "space")
+        i--;
+    if (i <= 0)
+        return 0;
+    // Skip through same character class (word or punct)
+    const cls = charClass(text[i]);
+    while (i > 0 && charClass(text[i - 1]) === cls)
+        i--;
+    return i;
+}
+/** Find the end of the next word from `pos` in `text`. */
+function nextWordBoundary(text, pos) {
+    const len = text.length;
+    if (pos >= len)
+        return len;
+    let i = pos;
+    // Skip through current character class (word or punct)
+    const cls = charClass(text[i]);
+    while (i < len && charClass(text[i]) === cls)
+        i++;
+    // Skip whitespace
+    while (i < len && charClass(text[i]) === "space")
+        i++;
+    return i;
+}
+/** Get the normalized selection range [start, end] from anchor and cursor, or null. */
+function getSelectionRange(anchor, cur) {
+    if (anchor === null || anchor === cur)
+        return null;
+    return [Math.min(anchor, cur), Math.max(anchor, cur)];
+}
 // Border (1 each side) + padding (1 each side) = 4 characters of overhead
 const BOX_OVERHEAD = 4;
+// Minimum content width to prevent zero/negative values that cause infinite
+// re-render loops when Ink tries to wrap text wider than available space.
+const MIN_CONTENT_WIDTH = 10;
 /**
  * Split text into visual lines based on terminal width.
  * Accounts for the prompt prefix, border, and padding.
@@ -37,9 +112,7 @@ function wrapLine(text, contentWidth) {
     return lines;
 }
 function getVisualLines(text, columns) {
-    const contentWidth = columns - PROMPT.length - BOX_OVERHEAD;
-    if (contentWidth <= 0)
-        return [text];
+    const contentWidth = Math.max(MIN_CONTENT_WIDTH, columns - PROMPT.length - BOX_OVERHEAD);
     if (text.length === 0)
         return [""];
     // Split on real newlines first, then wrap each
@@ -54,12 +127,14 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
     const theme = useTheme();
     const [value, setValue] = useState("");
     const [cursor, setCursor] = useState(0);
+    const cursorRef = useRef(cursor);
+    cursorRef.current = cursor;
+    const [selectionAnchor, setSelectionAnchor] = useState(null);
     const [images, setImages] = useState([]);
     const historyRef = useRef([]);
     const historyIndexRef = useRef(-1);
     const lastEscRef = useRef(0);
-    const { stdout } = useStdout();
-    const columns = stdout?.columns ?? 80;
+    const { columns } = useTerminalSize();
     const [menuIndex, setMenuIndex] = useState(0);
     const [pasteText, setPasteText] = useState(""); // accumulated pasted content
     const [pasteOffset, setPasteOffset] = useState(0); // where in value the paste starts
@@ -75,6 +150,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
     // Border color pulse (when idle/waiting for input)
     const borderPulseColors = useMemo(() => [theme.primary, theme.accent, theme.secondary, theme.accent], [theme.primary, theme.accent, theme.secondary]);
     // Derive border pulse and cursor blink from global animation tick
+    useAnimationActive();
     const tick = useAnimationTick();
     const borderFrame = disabled ? 0 : deriveFrame(tick, 800, borderPulseColors.length);
     // Cursor blink: ~530ms period → visible for ~500ms, hidden for ~500ms
@@ -141,7 +217,241 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
             internal_eventEmitter.removeListener("input", onInput);
         };
     }, [isActive, internal_eventEmitter]);
+    // --- Mouse click-to-position-cursor ---
+    // Store layout info in a ref so the mouse handler can map terminal
+    // coordinates to character offsets without re-subscribing on every change.
+    const layoutRef = useRef({
+        value: "",
+        displayLines: [""],
+        startLine: 0,
+        contentWidth: 10,
+        columns: 80,
+        hasImages: false,
+    });
+    // Self-calibrating anchor: the terminal row (1-based) of the LAST
+    // display line.  We track the last line (not the first) because Ink
+    // grows the input box upward — the bottom stays at a stable position
+    // while the top moves up as lines are added.  Calibrated on any
+    // single-line click (unambiguous), then remains valid as text wraps.
+    const lastLineRowRef = useRef(-1);
+    // Enable SGR mouse tracking and intercept mouse sequences before Ink's
+    // useInput sees them (which would insert the raw escape text).  We wrap
+    // the internal event emitter's `emit` so mouse data is consumed here and
+    // never forwarded to Ink's input handler.
+    const mouseEmitRef = useRef({ original: null });
+    // Track whether input has text so we can toggle mouse tracking.
+    // Only enable mouse tracking when there's text to navigate — when the input
+    // is empty, click-to-cursor is useless and disabling tracking lets the
+    // terminal handle CMD+click for opening links natively.
+    const hasInputTextRef = useRef(value.length > 0);
+    useEffect(() => {
+        if (!isActive || !internal_eventEmitter)
+            return;
+        // Only enable mouse tracking if there's text — when empty, let the
+        // terminal handle clicks natively (e.g., CMD+click to open links).
+        if (hasInputTextRef.current) {
+            process.stdout.write(ENABLE_MOUSE);
+        }
+        // Safety: ensure mouse tracking is disabled even on crash/SIGINT/unexpected exit
+        // so the terminal isn't left in a broken state sending escape sequences on every click.
+        const onProcessExit = () => process.stdout.write(DISABLE_MOUSE);
+        process.on("exit", onProcessExit);
+        const originalEmit = internal_eventEmitter.emit.bind(internal_eventEmitter);
+        mouseEmitRef.current.original = originalEmit;
+        // Scroll passthrough: when a scroll event is detected, temporarily disable
+        // mouse tracking so the terminal handles scroll natively (scrollback buffer).
+        // Re-enable after a short idle period so click-to-cursor continues to work.
+        let scrollTimer = null;
+        let mouseDisabled = false;
+        const reenableMouse = () => {
+            if (mouseDisabled && hasInputTextRef.current) {
+                process.stdout.write(ENABLE_MOUSE);
+                mouseDisabled = false;
+            }
+        };
+        const pauseMouseForScroll = () => {
+            if (!mouseDisabled) {
+                process.stdout.write(DISABLE_MOUSE);
+                mouseDisabled = true;
+            }
+            if (scrollTimer)
+                clearTimeout(scrollTimer);
+            scrollTimer = setTimeout(reenableMouse, 300);
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        internal_eventEmitter.emit = (event, ...args) => {
+            if (event === "input" && typeof args[0] === "string") {
+                const data = args[0];
+                // Strip all SGR mouse sequences from the data
+                const stripped = data.replace(SGR_MOUSE_RE_G, "");
+                // Process each mouse sequence for click handling
+                let match;
+                SGR_MOUSE_RE_G.lastIndex = 0;
+                while ((match = SGR_MOUSE_RE_G.exec(data)) !== null) {
+                    const btnCode = parseInt(match[1], 10);
+                    const termCol = parseInt(match[2], 10);
+                    const termRow = parseInt(match[3], 10);
+                    const isPress = match[4] === "M";
+                    // Decode SGR button code with bitmask:
+                    // bits 0-1: button (0=left, 1=middle, 2=right, 3=release)
+                    // bit 2 (4): shift held
+                    // bit 3 (8): meta/alt held (CMD on macOS)
+                    // bit 4 (16): control held
+                    // bit 5 (32): motion event
+                    // bit 6 (64): scroll wheel
+                    const button = btnCode & 3;
+                    const hasModifier = (btnCode & 0b11100) !== 0; // shift, meta, or ctrl
+                    const isMotion = (btnCode & 32) !== 0;
+                    const isScroll = (btnCode & 64) !== 0;
+                    // On scroll: disable mouse tracking so the terminal handles it natively,
+                    // then re-enable after idle so click-to-cursor keeps working.
+                    if (isScroll) {
+                        pauseMouseForScroll();
+                        continue;
+                    }
+                    // When modifier keys are held (CMD+click, Ctrl+click, Shift+click),
+                    // temporarily disable mouse tracking so the terminal can handle
+                    // the click natively (e.g., opening links with CMD+click).
+                    if (hasModifier) {
+                        pauseMouseForScroll();
+                        continue;
+                    }
+                    // Only handle left-click press (button 0), not motion or release
+                    if (button !== 0 || isMotion || !isPress)
+                        continue;
+                    const layout = layoutRef.current;
+                    if (!layout.value && layout.displayLines.length <= 1 && !layout.displayLines[0])
+                        continue;
+                    const numDisplayLines = layout.displayLines.length;
+                    // Calibrate on single-line click (unambiguous — the clicked row
+                    // IS the last (and only) display line's terminal row).
+                    if (numDisplayLines === 1) {
+                        lastLineRowRef.current = termRow;
+                    }
+                    // Determine which display line was clicked by computing from the
+                    // last line's row (stable because Ink grows the box upward).
+                    let clickedDisplayLine;
+                    if (lastLineRowRef.current > 0) {
+                        const firstLineRow = lastLineRowRef.current - numDisplayLines + 1;
+                        clickedDisplayLine = termRow - firstLineRow;
+                        // If calibration is stale (click outside valid range), recalibrate.
+                        if (clickedDisplayLine < 0) {
+                            lastLineRowRef.current = termRow + (numDisplayLines - 1);
+                            clickedDisplayLine = 0;
+                        }
+                        else if (clickedDisplayLine >= numDisplayLines) {
+                            lastLineRowRef.current = termRow;
+                            clickedDisplayLine = numDisplayLines - 1;
+                        }
+                    }
+                    else {
+                        // Not calibrated yet — assume click is on the last display line.
+                        // This calibrates correctly because the bottom is stable in Ink.
+                        lastLineRowRef.current = termRow;
+                        clickedDisplayLine = numDisplayLines - 1;
+                    }
+                    log("INFO", "mouse", "click", {
+                        termRow,
+                        termCol,
+                        lastLineRow: lastLineRowRef.current,
+                        clickedDisplayLine,
+                        numDisplayLines,
+                    });
+                    // Clamp to valid range
+                    if (clickedDisplayLine < 0)
+                        clickedDisplayLine = 0;
+                    if (clickedDisplayLine >= numDisplayLines)
+                        clickedDisplayLine = numDisplayLines - 1;
+                    // Column within the text: subtract border(1) + padding(1) + prompt(2) = 4
+                    const textCol = termCol - 1 - 4;
+                    const line = layout.displayLines[clickedDisplayLine];
+                    const col = Math.max(0, Math.min(textCol, line.length));
+                    // Convert display line + col to absolute character offset
+                    const { value: val, startLine: sl, contentWidth: cw } = layout;
+                    const hardLines = val.split("\n");
+                    let charOffset = 0;
+                    let vlIndex = 0;
+                    let found = false;
+                    for (let h = 0; h < hardLines.length; h++) {
+                        const hardLine = hardLines[h];
+                        const wrapped = wrapLine(hardLine, cw > 0 ? cw : val.length + 1);
+                        let hardLinePos = 0;
+                        for (let w = 0; w < wrapped.length; w++) {
+                            if (vlIndex === sl + clickedDisplayLine) {
+                                setCursor(Math.min(charOffset + col, val.length));
+                                setSelectionAnchor(null);
+                                found = true;
+                                break;
+                            }
+                            charOffset += wrapped[w].length;
+                            hardLinePos += wrapped[w].length;
+                            // Account for the space consumed by word-wrap break
+                            if (w < wrapped.length - 1 &&
+                                hardLinePos < hardLine.length &&
+                                hardLine[hardLinePos] === " ") {
+                                charOffset++;
+                                hardLinePos++;
+                            }
+                            vlIndex++;
+                        }
+                        if (found)
+                            break;
+                        charOffset++; // newline
+                    }
+                }
+                // Forward non-mouse data (if any remains) to Ink
+                if (stripped) {
+                    return originalEmit("input", stripped);
+                }
+                return true; // swallowed entirely
+            }
+            return originalEmit(event, ...args);
+        };
+        return () => {
+            if (scrollTimer)
+                clearTimeout(scrollTimer);
+            process.stdout.write(DISABLE_MOUSE);
+            process.removeListener("exit", onProcessExit);
+            // Restore original emit
+            if (mouseEmitRef.current.original) {
+                internal_eventEmitter.emit = mouseEmitRef.current.original;
+                mouseEmitRef.current.original = null;
+            }
+        };
+    }, [isActive, internal_eventEmitter]);
+    // Toggle mouse tracking based on input text: disable when empty so the
+    // terminal handles CMD+click for links natively, enable when there's text
+    // so click-to-cursor works.
+    useEffect(() => {
+        const hasText = value.length > 0;
+        if (hasText !== hasInputTextRef.current) {
+            hasInputTextRef.current = hasText;
+            if (isActive) {
+                process.stdout.write(hasText ? ENABLE_MOUSE : DISABLE_MOUSE);
+            }
+        }
+    }, [value, isActive]);
+    // Helper: delete selected text and return new value + cursor position.
+    // Returns null if no selection is active.
+    const deleteSelection = () => {
+        const sel = getSelectionRange(selectionAnchor, cursor);
+        if (!sel)
+            return null;
+        const [start, end] = sel;
+        return { newValue: value.slice(0, start) + value.slice(end), newCursor: start };
+    };
+    // Helper: clear all input state (used on submit / Ctrl+C / Escape)
+    const clearInput = () => {
+        setValue("");
+        setCursor(0);
+        setSelectionAnchor(null);
+        setImages([]);
+        setPasteText("");
+    };
     useInput((input, key) => {
+        // Filter out stray mouse escape sequences so they don't get inserted as text
+        if (isMouseEscapeSequence(input))
+            return;
         // Ctrl+T toggles task overlay — works even while agent is running
         if (key.ctrl && input === "t") {
             onToggleTasks?.();
@@ -166,8 +476,17 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
             // Submitted messages will be queued by the parent component.
         }
         if (key.return && (key.shift || key.meta)) {
-            setValue((v) => v.slice(0, cursor) + "\n" + v.slice(cursor));
-            setCursor((c) => c + 1);
+            // If there's a selection, replace it with the newline
+            const sel = deleteSelection();
+            if (sel) {
+                setValue(sel.newValue.slice(0, sel.newCursor) + "\n" + sel.newValue.slice(sel.newCursor));
+                setCursor(sel.newCursor + 1);
+            }
+            else {
+                setValue((v) => v.slice(0, cursor) + "\n" + v.slice(cursor));
+                setCursor((c) => c + 1);
+            }
+            setSelectionAnchor(null);
             return;
         }
         if (key.return) {
@@ -179,10 +498,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
                 historyRef.current.push(cmd);
                 historyIndexRef.current = -1;
                 onSubmit(cmd, []);
-                setValue("");
-                setCursor(0);
-                setImages([]);
-                setPasteText("");
+                clearInput();
                 return;
             }
             const trimmed = value.trim();
@@ -200,10 +516,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
                     }
                     : undefined;
                 onSubmit(trimmed, [...images], paste);
-                setValue("");
-                setCursor(0);
-                setImages([]);
-                setPasteText("");
+                clearInput();
             }
             return;
         }
@@ -217,10 +530,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
         }
         if (key.ctrl && input === "c") {
             if (value || images.length > 0) {
-                setValue("");
-                setCursor(0);
-                setImages([]);
-                setPasteText("");
+                clearInput();
             }
             else {
                 onAbort();
@@ -230,16 +540,53 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
         if (key.ctrl && input === "d") {
             process.exit(0);
         }
-        // Home / End
+        // Ctrl+W — delete previous word (or selection)
+        if (key.ctrl && input === "w") {
+            const sel = deleteSelection();
+            if (sel) {
+                setValue(sel.newValue);
+                setCursor(sel.newCursor);
+            }
+            else if (cursor > 0) {
+                const boundary = prevWordBoundary(value, cursor);
+                setValue((v) => v.slice(0, boundary) + v.slice(cursor));
+                setCursor(boundary);
+            }
+            setSelectionAnchor(null);
+            return;
+        }
+        // Home / End — Shift extends selection
         if (key.ctrl && input === "a") {
+            if (key.shift) {
+                if (selectionAnchor === null)
+                    setSelectionAnchor(cursor);
+            }
+            else {
+                setSelectionAnchor(null);
+            }
             setCursor(0);
             return;
         }
         if (key.ctrl && input === "e") {
+            if (key.shift) {
+                if (selectionAnchor === null)
+                    setSelectionAnchor(cursor);
+            }
+            else {
+                setSelectionAnchor(null);
+            }
             setCursor(value.length);
             return;
         }
         if (key.backspace || key.delete) {
+            // If selection active, delete the selection
+            const sel = deleteSelection();
+            if (sel) {
+                setValue(sel.newValue);
+                setCursor(sel.newCursor);
+                setSelectionAnchor(null);
+                return;
+            }
             if (cursor > 0) {
                 setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
                 setCursor((c) => c - 1);
@@ -247,6 +594,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
             else if (!value && images.length > 0) {
                 setImages((prev) => prev.slice(0, -1));
             }
+            setSelectionAnchor(null);
             return;
         }
         if (key.upArrow) {
@@ -255,6 +603,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
                 setMenuIndex((i) => Math.max(0, i - 1));
                 return;
             }
+            setSelectionAnchor(null);
             const history = historyRef.current;
             if (history.length === 0)
                 return;
@@ -272,6 +621,7 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
                 setMenuIndex((i) => Math.min(filteredCommands.length - 1, i + 1));
                 return;
             }
+            setSelectionAnchor(null);
             const history = historyRef.current;
             if (historyIndexRef.current === -1) {
                 if (onDownAtEnd)
@@ -292,12 +642,15 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
             return;
         }
         if (key.escape) {
+            // First escape clears selection, second clears input (double-tap)
+            if (selectionAnchor !== null) {
+                setSelectionAnchor(null);
+                lastEscRef.current = Date.now();
+                return;
+            }
             const now = Date.now();
             if ((value || images.length > 0) && now - lastEscRef.current < 400) {
-                setValue("");
-                setCursor(0);
-                setImages([]);
-                setPasteText("");
+                clearInput();
             }
             lastEscRef.current = now;
             return;
@@ -313,30 +666,108 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
                 const cmd = "/" + selected.name;
                 setValue(cmd);
                 setCursor(cmd.length);
+                setSelectionAnchor(null);
+            }
+            return;
+        }
+        // Option+Arrow word jump via raw escape sequences — many terminals send
+        // these as input strings rather than setting key.meta + arrow reliably.
+        if (OPTION_LEFT_SEQUENCES.has(input)) {
+            if (selectionAnchor !== null) {
+                const sel = getSelectionRange(selectionAnchor, cursor);
+                if (sel)
+                    setCursor(sel[0]);
+                setSelectionAnchor(null);
+            }
+            else {
+                setCursor(prevWordBoundary(value, cursor));
             }
             return;
         }
+        if (OPTION_RIGHT_SEQUENCES.has(input)) {
+            if (selectionAnchor !== null) {
+                const sel = getSelectionRange(selectionAnchor, cursor);
+                if (sel)
+                    setCursor(sel[1]);
+                setSelectionAnchor(null);
+            }
+            else {
+                setCursor(nextWordBoundary(value, cursor));
+            }
+            return;
+        }
+        // Arrow keys — Shift extends selection, Meta/Option jumps words
         if (key.leftArrow) {
-            if (cursor > 0)
+            if (key.shift) {
+                if (selectionAnchor === null)
+                    setSelectionAnchor(cursor);
+            }
+            else if (selectionAnchor !== null) {
+                // Collapse selection to the left edge
+                const sel = getSelectionRange(selectionAnchor, cursor);
+                if (sel)
+                    setCursor(sel[0]);
+                setSelectionAnchor(null);
+                return;
+            }
+            if (key.meta) {
+                setCursor(prevWordBoundary(value, cursor));
+            }
+            else if (cursor > 0) {
                 setCursor((c) => c - 1);
+            }
+            if (!key.shift)
+                setSelectionAnchor(null);
             return;
         }
         if (key.rightArrow) {
-            if (cursor < value.length)
+            if (key.shift) {
+                if (selectionAnchor === null)
+                    setSelectionAnchor(cursor);
+            }
+            else if (selectionAnchor !== null) {
+                // Collapse selection to the right edge
+                const sel = getSelectionRange(selectionAnchor, cursor);
+                if (sel)
+                    setCursor(sel[1]);
+                setSelectionAnchor(null);
+                return;
+            }
+            if (key.meta) {
+                setCursor(nextWordBoundary(value, cursor));
+            }
+            else if (cursor < value.length) {
                 setCursor((c) => c + 1);
+            }
+            if (!key.shift)
+                setSelectionAnchor(null);
             return;
         }
         if (input) {
             const normalized = input.replace(/\r\n?/g, "\n");
-            setValue((v) => v.slice(0, cursor) + normalized + v.slice(cursor));
-            setCursor((c) => c + normalized.length);
+            // If there's a selection, replace it with the typed input
+            const sel = deleteSelection();
+            if (sel) {
+                setValue(sel.newValue.slice(0, sel.newCursor) + normalized + sel.newValue.slice(sel.newCursor));
+                const newCur = sel.newCursor + normalized.length;
+                setCursor(newCur);
+                cursorRef.current = newCur;
+                setSelectionAnchor(null);
+            }
+            else {
+                const cur = cursorRef.current;
+                setValue((v) => v.slice(0, cur) + normalized + v.slice(cur));
+                setCursor(cur + normalized.length);
+                cursorRef.current = cur + normalized.length;
+            }
             // Detect paste: Ink delivers pasted text as input.length > 1
             // For large pastes, Ink may split into multiple chunks, so we
             // accumulate and debounce to capture the full paste.
             if (input.length > 1) {
+                const pasteStart = sel ? sel.newCursor : cursorRef.current - normalized.length;
                 setPasteText((prev) => {
                     if (!prev)
-                        setPasteOffset(cursor); // record where paste starts on first chunk
+                        setPasteOffset(pasteStart);
                     return prev + normalized;
                 });
                 if (pasteTimerRef.current)
@@ -351,29 +782,31 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
     }, { isActive });
     // Calculate visual lines and cap at MAX_VISIBLE_LINES (scroll to cursor)
     const visualLines = getVisualLines(value, columns);
-    const contentWidth = columns - PROMPT.length - BOX_OVERHEAD;
+    const contentWidth = Math.max(MIN_CONTENT_WIDTH, columns - PROMPT.length - BOX_OVERHEAD);
     // Find which visual line and column the cursor is on
     const cursorLineInfo = useMemo(() => {
         let pos = 0;
         const hardLines = value.split("\n");
         let visualLineIndex = 0;
         for (let h = 0; h < hardLines.length; h++) {
-            const wrapped = wrapLine(hardLines[h], contentWidth > 0 ? contentWidth : value.length + 1);
+            const hardLine = hardLines[h];
+            const wrapped = wrapLine(hardLine, contentWidth);
+            let hardLinePos = 0; // track position within the original hard line
             for (let w = 0; w < wrapped.length; w++) {
                 const lineLen = wrapped[w].length;
                 const lineStart = pos;
                 const lineEnd = pos + lineLen;
-                // Cursor is on this visual line if it falls within [lineStart, lineEnd]
-                // For the last wrapped segment of a hard line, also include the newline position
-                const isLastWrap = w === wrapped.length - 1;
-                const effectiveEnd = isLastWrap ? lineEnd : lineEnd;
-                if (cursor >= lineStart && cursor <= effectiveEnd) {
+                if (cursor >= lineStart && cursor <= lineEnd) {
                     return { line: visualLineIndex, col: cursor - lineStart };
                 }
                 pos += lineLen;
+                hardLinePos += lineLen;
                 // Account for the space consumed by word-wrap break
-                if (!isLastWrap) {
-                    // wrapped lines don't consume extra chars unless word-broken
+                if (w < wrapped.length - 1 &&
+                    hardLinePos < hardLine.length &&
+                    hardLine[hardLinePos] === " ") {
+                    pos++;
+                    hardLinePos++;
                 }
                 visualLineIndex++;
             }
@@ -397,6 +830,13 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
     }
     const displayLines = visualLines.slice(startLine, startLine + MAX_VISIBLE_LINES);
     const cursorDisplayLine = cursorLineInfo.line - startLine;
+    // Keep layout ref in sync for mouse click handler
+    layoutRef.current.value = value;
+    layoutRef.current.displayLines = displayLines;
+    layoutRef.current.startLine = startLine;
+    layoutRef.current.contentWidth = contentWidth;
+    layoutRef.current.columns = columns;
+    layoutRef.current.hasImages = images.length > 0;
     // Determine if the input starts with a slash command and find command boundary
     const isCommand = value.startsWith("/");
     // Command portion ends at first space (e.g., "/research" in "/research some args")
@@ -405,7 +845,9 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
             ? value.length
             : value.indexOf(" ")
         : 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: disabled ? theme.textDim : borderPulseColors[borderFrame], paddingLeft: 1, paddingRight: 1, children: [images.length > 0 && (_jsx(Box, { children: _jsx(Text, { color: theme.accent, children: images
+    // Active selection range (absolute character offsets)
+    const selection = getSelectionRange(selectionAnchor, cursor);
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: disabled ? theme.textDim : borderPulseColors[borderFrame], paddingLeft: 1, paddingRight: 1, children: [images.length > 0 && (_jsx(Box, { children: _jsx(Text, { color: theme.accent, children: images
                                 .map((img, i) => img.kind === "text" ? `[File: ${img.fileName}]` : `[Image #${i + 1}]`)
                                 .join(" ") }) })), (() => {
                         if (pasteText && value) {
@@ -433,41 +875,124 @@ export function InputArea({ onSubmit, onAbort, disabled = false, isActive = true
                             const col = cursorLineInfo.col;
                             // Calculate the absolute character offset where this display line starts
                             let lineStartOffset = 0;
-                            for (let j = 0; j < startLine + i; j++) {
-                                lineStartOffset += visualLines[j].length;
-                            }
                             const hardLines = value.split("\n");
                             let offset = 0;
                             let vlIndex = 0;
                             for (let h = 0; h < hardLines.length && vlIndex <= startLine + i; h++) {
-                                const wrapped = wrapLine(hardLines[h], contentWidth > 0 ? contentWidth : value.length + 1);
+                                const hardLine = hardLines[h];
+                                const cw = contentWidth > 0 ? contentWidth : value.length + 1;
+                                const wrapped = wrapLine(hardLine, cw);
+                                let hardLinePos = 0;
                                 for (let w = 0; w < wrapped.length && vlIndex <= startLine + i; w++) {
                                     if (vlIndex === startLine + i) {
                                         lineStartOffset = offset;
                                     }
                                     offset += wrapped[w].length;
+                                    hardLinePos += wrapped[w].length;
+                                    // Account for the space consumed by word-wrap break
+                                    if (w < wrapped.length - 1 &&
+                                        hardLinePos < hardLine.length &&
+                                        hardLine[hardLinePos] === " ") {
+                                        offset++;
+                                        hardLinePos++;
+                                    }
                                     vlIndex++;
                                 }
                                 offset++; // newline
                             }
-                            // Determine color for each character based on whether it's in the command portion
-                            const renderSegments = (text, textStartOffset) => {
-                                if (!isCommand || textStartOffset >= commandEndIndex) {
-                                    return _jsx(Text, { color: theme.text, children: text });
-                                }
-                                const cmdChars = Math.min(text.length, commandEndIndex - textStartOffset);
+                            const lineEndOffset = lineStartOffset + line.length;
+                            // Render a text segment with command coloring and optional selection highlight
+                            const renderSegment = (text, absOffset, opts) => {
+                                if (!text)
+                                    return null;
+                                const inCmd = isCommand && absOffset < commandEndIndex;
+                                const cmdChars = inCmd ? Math.min(text.length, commandEndIndex - absOffset) : 0;
+                                const inv = opts?.inverse ?? false;
                                 if (cmdChars >= text.length) {
-                                    return (_jsx(Text, { color: theme.commandColor, bold: true, children: text }));
+                                    return (_jsx(Text, { color: theme.commandColor, bold: true, inverse: inv, children: text }));
+                                }
+                                if (cmdChars > 0) {
+                                    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.commandColor, bold: true, inverse: inv, children: text.slice(0, cmdChars) }), _jsx(Text, { color: theme.text, inverse: inv, children: text.slice(cmdChars) })] }));
                                 }
-                                return (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.commandColor, bold: true, children: text.slice(0, cmdChars) }), _jsx(Text, { color: theme.text, children: text.slice(cmdChars) })] }));
+                                return (_jsx(Text, { color: theme.text, inverse: inv, children: text }));
                             };
-                            const before = showCursor ? line.slice(0, col) : line;
-                            const charUnderCursor = showCursor ? (col < line.length ? line[col] : " ") : "";
-                            const after = showCursor ? line.slice(col + (col < line.length ? 1 : 0)) : "";
-                            const cursorCharOffset = lineStartOffset + col;
-                            const cursorInCommand = isCommand && cursorCharOffset < commandEndIndex;
-                            return (_jsxs(Box, { children: [_jsx(Text, { color: disabled ? theme.textDim : theme.inputPrompt, bold: true, children: i === 0 ? PROMPT : "  " }), renderSegments(before, lineStartOffset), showCursor && (_jsx(Text, { color: cursorInCommand ? theme.commandColor : theme.text, bold: cursorInCommand, inverse: cursorVisible, children: charUnderCursor })), after &&
-                                        renderSegments(after, lineStartOffset + col + (col < line.length ? 1 : 0))] }, i));
+                            // Build segments for: [before-sel] [selected] [cursor] [after-sel]
+                            // considering that cursor and selection can overlap on this line
+                            const segments = [];
+                            let pos = 0; // position within `line`
+                            // Determine selection overlap with this line (in line-local coords)
+                            const selLocalStart = selection
+                                ? Math.max(0, selection[0] - lineStartOffset)
+                                : line.length;
+                            const selLocalEnd = selection
+                                ? Math.min(line.length, selection[1] - lineStartOffset)
+                                : line.length;
+                            const hasSelOnLine = selection !== null && selection[0] < lineEndOffset && selection[1] > lineStartOffset;
+                            if (hasSelOnLine) {
+                                // Text before selection
+                                if (selLocalStart > 0) {
+                                    segments.push(_jsx(React.Fragment, { children: renderSegment(line.slice(0, selLocalStart), lineStartOffset) }, "pre"));
+                                    pos = selLocalStart;
+                                }
+                                // Selected text — render with inverse, but split around cursor if needed
+                                if (showCursor && col >= selLocalStart && col < selLocalEnd) {
+                                    // Cursor is inside the selection
+                                    if (col > pos) {
+                                        segments.push(_jsx(React.Fragment, { children: renderSegment(line.slice(pos, col), lineStartOffset + pos, {
+                                                inverse: true,
+                                            }) }, "sel-before"));
+                                    }
+                                    // Cursor character (blinks within selection)
+                                    const cursorChar = col < line.length ? line[col] : " ";
+                                    const cursorAbs = lineStartOffset + col;
+                                    const curInCmd = isCommand && cursorAbs < commandEndIndex;
+                                    segments.push(_jsx(Text, { color: curInCmd ? theme.commandColor : theme.text, bold: curInCmd, inverse: cursorVisible, children: cursorChar }, "cursor"));
+                                    const afterCursorPos = col + (col < line.length ? 1 : 0);
+                                    if (afterCursorPos < selLocalEnd) {
+                                        segments.push(_jsx(React.Fragment, { children: renderSegment(line.slice(afterCursorPos, selLocalEnd), lineStartOffset + afterCursorPos, { inverse: true }) }, "sel-after"));
+                                    }
+                                    pos = selLocalEnd;
+                                }
+                                else {
+                                    // Cursor not on this selection portion — render entire selection inverse
+                                    segments.push(_jsx(React.Fragment, { children: renderSegment(line.slice(pos, selLocalEnd), lineStartOffset + pos, {
+                                            inverse: true,
+                                        }) }, "sel"));
+                                    pos = selLocalEnd;
+                                }
+                                // Cursor after selection on this line
+                                if (showCursor && col >= selLocalEnd) {
+                                    // Text between selection end and cursor
+                                    if (col > pos) {
+                                        segments.push(_jsx(React.Fragment, { children: renderSegment(line.slice(pos, col), lineStartOffset + pos) }, "mid"));
+                                    }
+                                    const cursorChar = col < line.length ? line[col] : " ";
+                                    const cursorAbs = lineStartOffset + col;
+                                    const curInCmd = isCommand && cursorAbs < commandEndIndex;
+                                    segments.push(_jsx(Text, { color: curInCmd ? theme.commandColor : theme.text, bold: curInCmd, inverse: cursorVisible, children: cursorChar }, "cursor"));
+                                    pos = col + (col < line.length ? 1 : 0);
+                                }
+                                // Text after selection (and cursor)
+                                if (pos < line.length) {
+                                    segments.push(_jsx(React.Fragment, { children: renderSegment(line.slice(pos), lineStartOffset + pos) }, "post"));
+                                }
+                            }
+                            else {
+                                // No selection on this line — original cursor-only rendering
+                                const before = showCursor ? line.slice(0, col) : line;
+                                const charUnderCursor = showCursor ? (col < line.length ? line[col] : " ") : "";
+                                const after = showCursor ? line.slice(col + (col < line.length ? 1 : 0)) : "";
+                                const cursorCharOffset = lineStartOffset + col;
+                                const cursorInCommand = isCommand && cursorCharOffset < commandEndIndex;
+                                segments.push(_jsx(React.Fragment, { children: renderSegment(before, lineStartOffset) }, "before"));
+                                if (showCursor) {
+                                    segments.push(_jsx(Text, { color: cursorInCommand ? theme.commandColor : theme.text, bold: cursorInCommand, inverse: cursorVisible, children: charUnderCursor }, "cursor"));
+                                }
+                                if (after) {
+                                    segments.push(_jsx(React.Fragment, { children: renderSegment(after, lineStartOffset + col + (col < line.length ? 1 : 0)) }, "after"));
+                                }
+                            }
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: disabled ? theme.textDim : theme.inputPrompt, bold: true, children: i === 0 ? PROMPT : "  " }), segments] }, i));
                         });
                     })()] }), isSlashMode && filteredCommands.length > 0 && (_jsx(SlashCommandMenu, { commands: commands, filter: slashFilter, selectedIndex: menuIndex }))] }));
 }