mixdog 0.8.0 → 0.9.0

package/src/tui/components/PromptInput.jsx

@@ -1,20 +1,20 @@
-/*
- * components/PromptInput.jsx — the prompt input line.
- *
- * A self-contained editor built on ink's useInput. The text renders as plain
- * text and a thin NATIVE hardware cursor sits at the insertion point (also where
- * the terminal echoes typed/IME characters).
- *
- * CURSOR — via a small ink fork (vendor/ink, mirrored into node_modules): we
- * tag the text-box node with `internal_cursorAnchor = { col, row }` (the caret's
- * position WITHIN the box). Forked ink, during renderNodeToOutput, parks the
- * hardware cursor at that node's REAL laid-out absolute cell + (col,row) — every
- * frame, from the actual yoga layout. This replaces ink's stock useCursor, whose
- * externally-supplied absolute coordinate drifted/vanished whenever the layout
- * above the input changed (spinner/thinking growth, Enter, fullscreen relayout)
- * because it was computed a beat before the final layout. The fork computes it
- * at the exact moment of drawing, so it can never be stale.
- */
+/*
+ * components/PromptInput.jsx — the prompt input line.
+ *
+ * A self-contained editor built on ink's useInput. The text renders as plain
+ * text and a thin NATIVE hardware cursor sits at the insertion point (also where
+ * the terminal echoes typed/IME characters).
+ *
+ * CURSOR — via a small ink fork (vendor/ink, mirrored into node_modules): we
+ * tag the text-box node with `internal_cursorAnchor = { col, row }` (the caret's
+ * position WITHIN the box). Forked ink, during renderNodeToOutput, parks the
+ * hardware cursor at that node's REAL laid-out absolute cell + (col,row) — every
+ * frame, from the actual yoga layout. This replaces ink's stock useCursor, whose
+ * externally-supplied absolute coordinate drifted/vanished whenever the layout
+ * above the input changed (spinner/thinking growth, Enter, fullscreen relayout)
+ * because it was computed a beat before the final layout. The fork computes it
+ * at the exact moment of drawing, so it can never be stale.
+ */
 import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
 import { Box, Text, useInput, usePaste, useStdin } from 'ink';
 import stringWidth from 'string-width';
@@ -32,6 +32,7 @@ import {
   moveCursor,
   nextOffset,
   nextWordOffset,
+  offsetAtCell,
   previousOffset,
   previousWordOffset,
   replaceSelection,
@@ -45,11 +46,17 @@ function hintStyle(tone) {
   if (tone === 'plain') return { textColor: theme.subtle };
   return { textColor: theme.inactive };
 }
-
+
+// Windows Terminal IME composition can clip a glyph that starts exactly at the
+// left edge of the editable text node. The rounded prompt box already adds a
+// paddingX of 1, so the typing start can sit directly against that padding
+// without an extra guard column.
+const IME_LEFT_GUARD_COLUMNS = 0;
+
 function insertText(draft, input) {
-  if (!input) return draft;
+  if (!input) return draft;
   return replaceSelection(draft, input);
-}
+}
 
 function renderSelectedText(displayValue, range, trailingSpace = false) {
   if (!range) return trailingSpace ? `${displayValue} ` : displayValue;
@@ -59,14 +66,14 @@ function renderSelectedText(displayValue, range, trailingSpace = false) {
     <>
       {start > 0 ? displayValue.slice(0, start) : null}
       {end > start ? (
-        <Text color={theme.inverseText} backgroundColor="rgb(245,245,245)">{displayValue.slice(start, end)}</Text>
+        <Text color={theme.selectionText} backgroundColor={theme.selectionBackground}>{displayValue.slice(start, end)}</Text>
       ) : null}
       {displayValue.slice(end)}
       {trailingSpace ? ' ' : ''}
     </>
   );
 }
-
+
 function normalizePastedText(text) {
   return String(text ?? '').replace(/\r\n?/g, '\n');
 }
@@ -78,10 +85,28 @@ function singleTrailingLineBreakPrefix(text) {
   return prefix.includes('\n') ? null : prefix;
 }
 
+function draftStateEqual(a, b) {
+  return (
+    a.value === b.value
+    && a.cursor === b.cursor
+    && a.selectionAnchor === b.selectionAnchor
+  );
+}
+
+function isCtrlEnterSequence(input) {
+  const text = String(input ?? '');
+  const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
+  if (!body) return false;
+  const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
+  if (kitty) return ((Number(kitty[1]) - 1) & 4) !== 0;
+  const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
+  return Boolean(modifyOtherKeys && (((Number(modifyOtherKeys[1]) - 1) & 4) !== 0));
+}
+
 export function PromptInput({
-  onSubmit,
-  disabled = false,
-  onDraftChange,
+  onSubmit,
+  disabled = false,
+  onDraftChange,
   interruptActive = false,
   onInterrupt,
   commandPaletteActive = false,
@@ -91,14 +116,18 @@ export function PromptInput({
   initialValue = '',
   draftOverride,
   onEscape,
+  onTab,
   onCommandPaletteNavigate,
   onCommandPaletteAccept,
   onCommandPaletteCancel,
   onCommandPaletteComplete,
   onRestoreQueued,
+  onHistoryNavigate,
   onPasteText,
   selectionRef,
   valueRef,
+  boxRectRef,
+  mouseSelectionRef,
 }) {
   const [draft, setDraft] = useState(() => {
     const value = String(initialValue || '');
@@ -109,43 +138,45 @@ export function PromptInput({
   const lastReportedValueRef = useRef(draft.value);
   if (valueRef) valueRef.current = draftRef.current.value;
   const { isRawModeSupported } = useStdin();
-  // The text box's ink DOM node. We mark it as the cursor anchor (forked ink
-  // reads internal_cursorAnchor during render and parks the hardware cursor at
-  // that node's REAL laid-out position + our caret col/row — no external
-  // absolute-coordinate guessing, so it never drifts).
-  const boxRef = useRef(null);
-  const cursorEnabledRef = useRef(false); // latest enabled state, read by the anchor fn at render time
-  const contentWidthRef = useRef(80);
-  const preferredColumnRef = useRef(null);
-  const { value, cursor } = draft;
-  draftRef.current = draft;
-  if (selectionRef) {
-    const range = selectionRange(draft);
-    selectionRef.current = range
-      ? { range, text: mask ? '' : draft.value.slice(range.start, range.end) }
-      : null;
-  }
-
-  // Bypass ink's render throttle for keystroke echo. ink coalesces renders to
-  // maxFps (leading+trailing throttle), so when typing faster than one frame the
-  // last chars land on the trailing timer — felt as input lag ("a beat behind").
-  // ink exposes an UNthrottled `onImmediateRender` on the ink-root node; walking
-  // the parent chain from our box and firing it flushes the new draft in the same
-  // tick. Guarded so a structure change in the ink fork degrades to throttled
-  // (slower) rendering, never a crash.
+  // The text box's ink DOM node. We mark it as the cursor anchor (forked ink
+  // reads internal_cursorAnchor during render and parks the hardware cursor at
+  // that node's REAL laid-out position + our caret col/row — no external
+  // absolute-coordinate guessing, so it never drifts).
+  const boxRef = useRef(null);
+  const cursorEnabledRef = useRef(false); // latest enabled state, read by the anchor fn at render time
+  const contentWidthRef = useRef(80);
+  const preferredColumnRef = useRef(null);
+  const { value, cursor } = draft;
+  draftRef.current = draft;
+  if (selectionRef) {
+    const range = selectionRange(draft);
+    selectionRef.current = range
+      ? { range, text: mask ? '' : draft.value.slice(range.start, range.end) }
+      : null;
+  }
+
+  // Bypass ink's render throttle for keystroke echo. ink coalesces renders to
+  // maxFps (leading+trailing throttle), so when typing faster than one frame the
+  // last chars land on the trailing timer — felt as input lag ("a beat behind").
+  // ink exposes an UNthrottled `onImmediateRender` on the ink-root node; walking
+  // the parent chain from our box and firing it flushes the new draft in the same
+  // tick. Guarded so a structure change in the ink fork degrades to throttled
+  // (slower) rendering, never a crash.
   const flushImmediate = () => {
-    let node = boxRef.current;
-    for (let i = 0; node && i < 64; i++) {
-      if (node.nodeName === 'ink-root') {
-        if (typeof node.onImmediateRender === 'function') node.onImmediateRender();
-        return;
-      }
-      node = node.parentNode;
-    }
-  };
-
+    let node = boxRef.current;
+    for (let i = 0; node && i < 64; i++) {
+      if (node.nodeName === 'ink-root') {
+        if (typeof node.onImmediateRender === 'function') node.onImmediateRender();
+        return;
+      }
+      node = node.parentNode;
+    }
+  };
+
   const commitDraft = (next, options = {}) => {
+    const sameDraft = draftStateEqual(draftRef.current, next);
     if (!options.keepPreferredColumn) preferredColumnRef.current = null;
+    if (sameDraft) return;
     draftRef.current = next;
     setDraft(next);
     queueMicrotask(flushImmediate);
@@ -159,21 +190,78 @@ export function PromptInput({
   const installCursorAnchor = () => {
     if (!boxRef.current || boxRef.current.internal_cursorAnchor) return false;
     boxRef.current.internal_cursorAnchor = (yogaNode) => {
+      // [mixdog] Report the editable content box's REAL absolute rect up to App
+      // every frame so the mouse handler can map a click/drag cell to an edit
+      // offset. Walk the parent chain summing yoga computed offsets (same math
+      // render-node-to-output uses) — boxRef is the flex-row that holds the text
+      // node, so its absolute x/y is the first content cell (col 0,row 0).
+      if (boxRectRef) {
+        let absLeft = 0;
+        let absTop = 0;
+        let node = boxRef.current;
+        for (let i = 0; node && i < 64; i++) {
+          const yn = node.yogaNode;
+          if (yn?.getComputedLeft) {
+            absLeft += yn.getComputedLeft() || 0;
+            absTop += yn.getComputedTop() || 0;
+          }
+          if (node.nodeName === 'ink-root') break;
+          node = node.parentNode;
+        }
+        const wNow = yogaNode?.getComputedWidth?.() ?? 0;
+        const hNow = yogaNode?.getComputedHeight?.() ?? 1;
+        boxRectRef.current = {
+          top: absTop,
+          left: absLeft,
+          height: Math.max(1, hNow || 1),
+          contentWidth: contentWidthRef.current,
+        };
+      }
       if (!cursorEnabledRef.current) return null;
       const d = draftRef.current;
       const w = yogaNode?.getComputedWidth?.() ?? 0;
-      contentWidthRef.current = Math.max(1, w || contentWidthRef.current || 80);
-      return w > 0
-        ? caretPosition(d.value, d.cursor, w)
+      const guardColumns = w > IME_LEFT_GUARD_COLUMNS ? IME_LEFT_GUARD_COLUMNS : 0;
+      const contentWidth = Math.max(1, (w ? w - guardColumns : contentWidthRef.current) || 80);
+      contentWidthRef.current = contentWidth;
+      const caret = w > 0
+        ? caretPosition(d.value, d.cursor, contentWidth)
         : { row: 0, col: stringWidth(d.value.slice(0, d.cursor)) };
+      return w > 0
+        ? { ...caret, col: caret.col + guardColumns }
+        : caret;
     };
     return true;
   };
-
+
   const updateDraft = (fn, options = {}) => {
     commitDraft(fn(draftRef.current), options);
   };
 
+  // [mixdog] Mouse drag-selection driver. App's single mouse handler maps a
+  // click/drag cell over the prompt box to an edit offset and calls these so the
+  // SAME selectionAnchor/cursor engine that keyboard Shift-selection uses paints
+  // the highlight. Anchor on press, extend on drag/release; clear on a plain
+  // click. Reuses contentWidthRef (the real measured content width).
+  if (mouseSelectionRef) {
+    mouseSelectionRef.current = {
+      offsetAtCell: (row, col) => offsetAtCell(draftRef.current.value, row, col, contentWidthRef.current),
+      anchorAt: (offset) => {
+        const value = draftRef.current.value;
+        const off = Math.max(0, Math.min(value.length, Math.floor(Number(offset) || 0)));
+        commitDraft({ ...draftRef.current, cursor: off, selectionAnchor: off });
+      },
+      extendTo: (offset) => {
+        const d = draftRef.current;
+        const off = Math.max(0, Math.min(d.value.length, Math.floor(Number(offset) || 0)));
+        const anchor = Number.isFinite(d.selectionAnchor) ? d.selectionAnchor : d.cursor;
+        commitDraft({ ...d, cursor: off, selectionAnchor: anchor });
+      },
+      clear: () => {
+        if (selectionRange(draftRef.current)) commitDraft(clearSelection(draftRef.current));
+      },
+    };
+  }
+
   const moveDraftVertically = (direction, { extend = false } = {}) => {
     const current = draftRef.current;
     const moved = verticalOffset(
@@ -193,6 +281,13 @@ export function PromptInput({
     return onRestoreQueued?.(draftRef.current.value) === true;
   };
 
+  const applyHistoryNavigation = (direction, meta = {}) => {
+    const nextValue = onHistoryNavigate?.(direction, draftRef.current.value, meta);
+    if (typeof nextValue !== 'string') return false;
+    commitDraft({ value: nextValue, cursor: nextValue.length, selectionAnchor: null });
+    return true;
+  };
+
   const insertAtDraft = (text) => {
     const value = String(text ?? '');
     if (!value) return;
@@ -234,12 +329,12 @@ export function PromptInput({
   }, [selectionRef]);
 
   const submitDraft = (next) => {
-    const text = next.value;
-    const accepted = onSubmit?.(text) !== false;
-    if (!accepted) {
-      commitDraft(next);
-      return;
-    }
+    const text = next.value;
+    const accepted = onSubmit?.(text) !== false;
+    if (!accepted) {
+      commitDraft(next);
+      return;
+    }
     commitDraft({ value: '', cursor: 0, selectionAnchor: null });
   };
 
@@ -257,34 +352,47 @@ export function PromptInput({
     }
     submitDraft(next);
   };
-
-  // Input capture is only active on a real TTY (raw mode). In pipes/CI the input
-  // is inert — useInput with isActive:false won't throw.
+
+  // Input capture is only active on a real TTY (raw mode). In pipes/CI the input
+  // is inert — useInput with isActive:false won't throw.
   usePaste((text) => {
     if (disabled) return;
     handleExternalPaste(text, { source: 'paste' });
   }, { isActive: isRawModeSupported && !disabled });
-
-  useInput((input, key) => {
-    if (disabled) return;
-
-    const rawInput = String(input ?? '');
-    const inputKey = rawInput.toLowerCase();
-
-    // Drop SGR mouse-tracking sequences (wheel/click). When app mouse tracking
-    // is explicitly enabled, App parses these off raw stdin itself;
-    // ink still forwards the bytes here as "input", which would otherwise type
-    // garbage like `[<64;55;22M` into the prompt. Match with or without the
-    // leading ESC (terminals/ink may strip it): CSI '<' … final 'M'/'m'.
+
+  useInput((input, key) => {
+    if (disabled) return;
+
+    const rawInput = String(input ?? '');
+    const inputKey = rawInput.toLowerCase();
+
+    // Drop SGR mouse-tracking sequences (wheel/click). When app mouse tracking
+    // is explicitly enabled, App parses these off raw stdin itself;
+    // ink still forwards the bytes here as "input", which would otherwise type
+    // garbage like `[<64;55;22M` into the prompt. Match with or without the
+    // leading ESC (terminals/ink may strip it): CSI '<' … final 'M'/'m'.
     if (/(?:\x1b)?\[<\d+;\d+;\d+[Mm]/.test(rawInput) || /^\[?<\d+;\d+;\d+[Mm]?$/.test(rawInput)) {
       return;
     }
 
     const rawUpArrow = rawInput === '\x1b[A' || rawInput === '\x1bOA' || rawInput === '[A' || rawInput === 'OA';
     const rawDownArrow = rawInput === '\x1b[B' || rawInput === '\x1bOB' || rawInput === '[B' || rawInput === 'OB';
+    // Shift+Arrow modifier sequences (xterm `\x1b[1;2<dir>`, rxvt `\x1b[<dir>`
+    // lowercase). Ink's useInput does not decode the `;2` (shift) modifier into
+    // key.shift for arrows, so the bytes arrive as raw input and the plain-arrow
+    // matchers above miss them — selection-extend never fires. Detect them here
+    // and fold into a single `shiftHeld` signal used by every arrow/home/end
+    // branch below (alongside ink's key.shift for terminals that DO decode it).
+    const rawShiftUp = rawInput === '\x1b[1;2A' || rawInput === '\x1b[a' || rawInput === '[1;2A';
+    const rawShiftDown = rawInput === '\x1b[1;2B' || rawInput === '\x1b[b' || rawInput === '[1;2B';
+    const rawShiftRight = rawInput === '\x1b[1;2C' || rawInput === '\x1b[c' || rawInput === '[1;2C';
+    const rawShiftLeft = rawInput === '\x1b[1;2D' || rawInput === '\x1b[d' || rawInput === '[1;2D';
+    const shiftHeld = key.shift || rawShiftUp || rawShiftDown || rawShiftLeft || rawShiftRight;
     const lineBreakIndex = rawInput.search(/[\r\n]/);
     const rawEnter = rawInput === '\r' || rawInput === '\n' || rawInput === '\r\n';
     const trailingEnterPrefix = singleTrailingLineBreakPrefix(rawInput);
+    const rawCtrlEnter = isCtrlEnterSequence(rawInput);
+    const modifiedLineBreak = key.shift || key.meta || key.ctrl || rawCtrlEnter;
 
     const pasteFallback = lineBreakIndex !== -1 && trailingEnterPrefix === null && !rawEnter && (rawInput.length > 1 || !key.return);
     if (pasteFallback) {
@@ -293,7 +401,7 @@ export function PromptInput({
     }
 
     if (trailingEnterPrefix !== null) {
-      if (key.shift || key.meta) {
+      if (modifiedLineBreak) {
         updateDraft((d) => insertText(d, `${trailingEnterPrefix}\n`));
         return;
       }
@@ -301,53 +409,65 @@ export function PromptInput({
       return;
     }
 
+    if (rawCtrlEnter) {
+      updateDraft((d) => replaceSelection(d, '\n'));
+      return;
+    }
+
     if (!commandPaletteActive && ((key.ctrl && inputKey === 'v') || (key.meta && inputKey === 'v'))) {
       handleExternalPaste('', { source: 'clipboard-image-shortcut' });
       return;
     }
 
-    if (key.return) {
-      if (key.shift || key.meta) {
-        updateDraft((d) => replaceSelection(d, '\n'));
-        return;
-      }
-
-      if (commandPaletteActive) {
-        const accepted = onCommandPaletteAccept?.(draftRef.current.value);
-        if (accepted !== false) {
-          commitDraft({ value: '', cursor: 0, selectionAnchor: null });
+    if (key.return) {
+      if (modifiedLineBreak) {
+        updateDraft((d) => replaceSelection(d, '\n'));
+        return;
+      }
+
+      if (commandPaletteActive) {
+        const accepted = onCommandPaletteAccept?.(draftRef.current.value);
+        if (accepted !== false) {
+          commitDraft({ value: '', cursor: 0, selectionAnchor: null });
         }
-        return;
-      }
-
-      const current = draftRef.current;
-      if (current.value[current.cursor - 1] === '\\') {
-        updateDraft((d) => ({
-          value: `${d.value.slice(0, d.cursor - 1)}\n${d.value.slice(d.cursor)}`,
-          cursor: d.cursor,
-          selectionAnchor: null,
-        }));
-        return;
-      }
-
-      submitDraft(current);
-      return;
-    }
-
-    if (key.upArrow || rawUpArrow) {
+        return;
+      }
+
+      const current = draftRef.current;
+      if (current.value[current.cursor - 1] === '\\') {
+        updateDraft((d) => ({
+          value: `${d.value.slice(0, d.cursor - 1)}\n${d.value.slice(d.cursor)}`,
+          cursor: d.cursor,
+          selectionAnchor: null,
+        }));
+        return;
+      }
+
+      submitDraft(current);
+      return;
+    }
+
+    if (key.upArrow || rawUpArrow || rawShiftUp) {
       if (commandPaletteActive) {
         onCommandPaletteNavigate?.(-1);
       } else {
-        if (!restoreQueuedToDraft()) moveDraftVertically(-1, { extend: key.shift });
+        const hasDraftText = String(draftRef.current.value || '').trim().length > 0;
+        if (!hasDraftText) {
+          if (!restoreQueuedToDraft()) applyHistoryNavigation('up', { emptyDraft: true });
+        } else if (!moveDraftVertically(-1, { extend: shiftHeld })) {
+          applyHistoryNavigation('up', { emptyDraft: false });
+        }
       }
       return;
     }
 
-    if (key.downArrow || rawDownArrow) {
+    if (key.downArrow || rawDownArrow || rawShiftDown) {
       if (commandPaletteActive) {
         onCommandPaletteNavigate?.(1);
       } else {
-        moveDraftVertically(1, { extend: key.shift });
+        if (!moveDraftVertically(1, { extend: shiftHeld })) {
+          applyHistoryNavigation('down', { emptyDraft: String(draftRef.current.value || '').trim().length === 0 });
+        }
       }
       return;
     }
@@ -372,14 +492,17 @@ export function PromptInput({
       return;
     }
 
-    if (key.tab && commandPaletteActive) {
-      const completed = onCommandPaletteComplete?.(draftRef.current.value);
-      if (typeof completed === 'string') {
-        commitDraft({ value: completed, cursor: completed.length, selectionAnchor: null });
-      }
-      return;
-    }
-
+    if (key.tab) {
+      if (commandPaletteActive) {
+        const completed = onCommandPaletteComplete?.(draftRef.current.value);
+        if (typeof completed === 'string') {
+          commitDraft({ value: completed, cursor: completed.length, selectionAnchor: null });
+        }
+        return;
+      }
+      if (onTab?.(draftRef.current.value) === true) return;
+    }
+
     if (key.escape) {
       if (commandPaletteActive) {
         onCommandPaletteCancel?.(draftRef.current.value);
@@ -399,6 +522,10 @@ export function PromptInput({
         commitDraft({ value: '', cursor: 0, selectionAnchor: null });
         return;
       }
+      // Active turn takes precedence over queue restore (matches claude-code
+      // useCancelRequest priority): Esc during a running turn interrupts the
+      // turn and leaves queued steering prompts intact to run afterward. Queued
+      // messages only pop back into the draft when the turn is idle.
       if (interruptActive) {
         const restoredText = onInterrupt?.('');
         if (typeof restoredText === 'string') {
@@ -413,145 +540,145 @@ export function PromptInput({
       return;
     }
 
-    if (key.leftArrow) {
+    if (key.leftArrow || rawShiftLeft) {
       if (commandPaletteActive) {
         onCommandPaletteNavigate?.('left');
         return;
       }
       updateDraft((d) => {
-        const range = !key.shift && !key.ctrl && !key.meta ? selectionRange(d) : null;
+        const range = !shiftHeld && !key.ctrl && !key.meta ? selectionRange(d) : null;
         const cursor = range
           ? range.start
           : key.ctrl || key.meta
             ? previousWordOffset(d.value, d.cursor)
             : previousOffset(d.value, d.cursor);
-        return moveCursor(d, cursor, { extend: key.shift });
+        return moveCursor(d, cursor, { extend: shiftHeld });
       });
       return;
     }
-    if (key.rightArrow) {
+    if (key.rightArrow || rawShiftRight) {
       if (commandPaletteActive) {
         onCommandPaletteNavigate?.('right');
         return;
       }
       updateDraft((d) => {
-        const range = !key.shift && !key.ctrl && !key.meta ? selectionRange(d) : null;
+        const range = !shiftHeld && !key.ctrl && !key.meta ? selectionRange(d) : null;
         const cursor = range
           ? range.end
           : key.ctrl || key.meta
             ? nextWordOffset(d.value, d.cursor)
             : nextOffset(d.value, d.cursor);
-        return moveCursor(d, cursor, { extend: key.shift });
+        return moveCursor(d, cursor, { extend: shiftHeld });
       });
       return;
     }
-    if (key.home) {
-      updateDraft((d) => moveCursor(d, lineStart(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-    if (key.end) {
+    if (key.home) {
+      updateDraft((d) => moveCursor(d, lineStart(d.value, d.cursor), { extend: shiftHeld }));
+      return;
+    }
+    if (key.end) {
+      updateDraft((d) => moveCursor(d, lineEnd(d.value, d.cursor), { extend: shiftHeld }));
+      return;
+    }
+
+    const editingKey = String(input || '').toLowerCase();
+
+    // ctrl+a selects all like a normal text box; ctrl+e keeps readline line-end.
+    if (key.ctrl && editingKey === 'a') {
+      updateDraft((d) => (d.value ? { ...d, cursor: d.value.length, selectionAnchor: 0 } : clearSelection(d)));
+      return;
+    }
+    if (key.ctrl && editingKey === 'e') {
       updateDraft((d) => moveCursor(d, lineEnd(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-
-    const editingKey = String(input || '').toLowerCase();
-
-    // ctrl+a selects all like a normal text box; ctrl+e keeps readline line-end.
-    if (key.ctrl && editingKey === 'a') {
-      updateDraft((d) => (d.value ? { ...d, cursor: d.value.length, selectionAnchor: 0 } : clearSelection(d)));
-      return;
-    }
-    if (key.ctrl && editingKey === 'e') {
-      updateDraft((d) => moveCursor(d, lineEnd(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-    // ctrl+b / ctrl+f — character left / right.
-    if (key.ctrl && editingKey === 'b') {
-      updateDraft((d) => moveCursor(d, previousOffset(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-    if (key.ctrl && editingKey === 'f') {
-      updateDraft((d) => moveCursor(d, nextOffset(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-    // alt/option+b / alt/option+f — word left / right.
-    if (key.meta && editingKey === 'b') {
-      updateDraft((d) => moveCursor(d, previousWordOffset(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-    if (key.meta && editingKey === 'f') {
-      updateDraft((d) => moveCursor(d, nextWordOffset(d.value, d.cursor), { extend: key.shift }));
-      return;
-    }
-    // ctrl+u / ctrl+k — delete to line start / end.
-    if (key.ctrl && editingKey === 'u') {
-      updateDraft(deleteToLineStart);
-      return;
-    }
-    if (key.ctrl && editingKey === 'k') {
-      updateDraft(deleteToLineEnd);
-      return;
-    }
-    // ctrl+w / alt+backspace — delete previous word.
-    if ((key.ctrl && editingKey === 'w') || ((key.ctrl || key.meta) && key.backspace)) {
-      updateDraft(deleteBackwardWord);
-      return;
-    }
-    // alt+d / ctrl+delete — delete next word.
-    if ((key.meta && editingKey === 'd') || (key.ctrl && key.delete)) {
-      updateDraft(deleteForwardWord);
-      return;
-    }
-
-    if (key.backspace) {
-      updateDraft((d) => {
-        if (selectionRange(d)) return deleteSelectedText(d);
-        if (d.cursor <= 0) return d;
-        const start = previousOffset(d.value, d.cursor);
-        return {
-          value: d.value.slice(0, start) + d.value.slice(d.cursor),
-          cursor: start,
-          selectionAnchor: null,
-        };
-      });
-      return;
-    }
-
-    if (key.delete) {
-      updateDraft((d) => {
-        if (selectionRange(d)) return deleteSelectedText(d);
-        if (d.cursor >= d.value.length) return d;
-        const end = nextOffset(d.value, d.cursor);
-        return {
-          value: d.value.slice(0, d.cursor) + d.value.slice(end),
-          cursor: d.cursor,
-          selectionAnchor: null,
-        };
-      });
-      return;
-    }
-
-    // Printable input (ignore other control keys). Strip any embedded SGR mouse
-    // sequences as a belt-and-suspenders guard (the early return above catches
-    // whole-sequence inputs; this removes partials that rode in with real text).
-    const printable = rawInput
-      .replace(/(?:\x1b)?\[<\d+;\d+;\d+[Mm]/g, '')
-      .replace(/[\r\n]/g, '');
-    if (printable && !key.ctrl && !key.meta) {
-      updateDraft((d) => insertText(d, printable));
-    }
-  }, { isActive: isRawModeSupported && !disabled });
-
-  // Mark the text-box node with a cursor-anchor FUNCTION. Forked ink calls it
-  // during renderNodeToOutput — AFTER yoga layout is final and (crucially)
-  // during the same onRender that paints the new text. The function reads the
-  // latest caret from refs (synced every render below), so the cursor can never
-  // be stale: an earlier object-anchor set in a layout effect was always one
-  // keystroke behind, because ink's reconciler runs onRender inside
-  // resetAfterCommit BEFORE React layout effects — that lag made the 2nd+ char
-  // appear to land behind the caret (the observed scramble). Computing inside
-  // the fork, from the real layout + current refs, fixes that by construction.
-  cursorEnabledRef.current = !disabled && isRawModeSupported;
+      return;
+    }
+    // ctrl+b / ctrl+f — character left / right.
+    if (key.ctrl && editingKey === 'b') {
+      updateDraft((d) => moveCursor(d, previousOffset(d.value, d.cursor), { extend: key.shift }));
+      return;
+    }
+    if (key.ctrl && editingKey === 'f') {
+      updateDraft((d) => moveCursor(d, nextOffset(d.value, d.cursor), { extend: key.shift }));
+      return;
+    }
+    // alt/option+b / alt/option+f — word left / right.
+    if (key.meta && editingKey === 'b') {
+      updateDraft((d) => moveCursor(d, previousWordOffset(d.value, d.cursor), { extend: key.shift }));
+      return;
+    }
+    if (key.meta && editingKey === 'f') {
+      updateDraft((d) => moveCursor(d, nextWordOffset(d.value, d.cursor), { extend: key.shift }));
+      return;
+    }
+    // ctrl+u / ctrl+k — delete to line start / end.
+    if (key.ctrl && editingKey === 'u') {
+      updateDraft(deleteToLineStart);
+      return;
+    }
+    if (key.ctrl && editingKey === 'k') {
+      updateDraft(deleteToLineEnd);
+      return;
+    }
+    // ctrl+w / alt+backspace — delete previous word.
+    if ((key.ctrl && editingKey === 'w') || ((key.ctrl || key.meta) && key.backspace)) {
+      updateDraft(deleteBackwardWord);
+      return;
+    }
+    // alt+d / ctrl+delete — delete next word.
+    if ((key.meta && editingKey === 'd') || (key.ctrl && key.delete)) {
+      updateDraft(deleteForwardWord);
+      return;
+    }
+
+    if (key.backspace) {
+      updateDraft((d) => {
+        if (selectionRange(d)) return deleteSelectedText(d);
+        if (d.cursor <= 0) return d;
+        const start = previousOffset(d.value, d.cursor);
+        return {
+          value: d.value.slice(0, start) + d.value.slice(d.cursor),
+          cursor: start,
+          selectionAnchor: null,
+        };
+      });
+      return;
+    }
+
+    if (key.delete) {
+      updateDraft((d) => {
+        if (selectionRange(d)) return deleteSelectedText(d);
+        if (d.cursor >= d.value.length) return d;
+        const end = nextOffset(d.value, d.cursor);
+        return {
+          value: d.value.slice(0, d.cursor) + d.value.slice(end),
+          cursor: d.cursor,
+          selectionAnchor: null,
+        };
+      });
+      return;
+    }
+
+    // Printable input (ignore other control keys). Strip any embedded SGR mouse
+    // sequences as a belt-and-suspenders guard (the early return above catches
+    // whole-sequence inputs; this removes partials that rode in with real text).
+    const printable = rawInput
+      .replace(/(?:\x1b)?\[<\d+;\d+;\d+[Mm]/g, '')
+      .replace(/[\r\n]/g, '');
+    if (printable && !key.ctrl && !key.meta) {
+      updateDraft((d) => insertText(d, printable));
+    }
+  }, { isActive: isRawModeSupported && !disabled });
+
+  // Mark the text-box node with a cursor-anchor FUNCTION. Forked ink calls it
+  // during renderNodeToOutput — AFTER yoga layout is final and (crucially)
+  // during the same onRender that paints the new text. The function reads the
+  // latest caret from refs (synced every render below), so the cursor can never
+  // be stale: an earlier object-anchor set in a layout effect was always one
+  // keystroke behind, because ink's reconciler runs onRender inside
+  // resetAfterCommit BEFORE React layout effects — that lag made the 2nd+ char
+  // appear to land behind the caret (the observed scramble). Computing inside
+  // the fork, from the real layout + current refs, fixes that by construction.
+  cursorEnabledRef.current = !disabled && isRawModeSupported;
   installCursorAnchor();
 
   useLayoutEffect(() => {
@@ -564,15 +691,16 @@ export function PromptInput({
     if (disabled || !isRawModeSupported) return;
     queueMicrotask(flushImmediate);
   }, [disabled, isRawModeSupported]);
-
-  // Trailing space cell so the caret at end-of-input has a rendered cell to sit
-  // on (kept visually blank — no synthetic underline).
+
+  // Trailing space cell so the caret at end-of-input has a rendered cell to sit
+  // on (kept visually blank — no synthetic underline).
   const displayValue = mask ? value.replace(/[^\n]/g, '*') : value;
   const renderedValue = renderSelectedText(displayValue, selectionRange(draft), cursor === value.length);
   const hintMeta = hintStyle(hintTone);
 
   return (
     <Box ref={boxRef} flexDirection="row" flexGrow={1} flexShrink={1} backgroundColor={theme.background}>
+      <Box width={IME_LEFT_GUARD_COLUMNS} flexShrink={0} backgroundColor={theme.background} />
       <Text color={theme.text} wrap="hard">{renderedValue}</Text>
       {!value && hint ? (
         <Box marginLeft={-1}>