dsh-code 1.0.1 → 1.0.2

package/src/app.ts

@@ -40,16 +40,20 @@ import type { TranscriptStore } from './store.ts'
 import { settledEntryCount, type TranscriptEntry } from './render/projection.ts'
 import { type MdSegment, visibleColumns } from './render/markdown.ts'
 import {
-  busyChaseFrame,
-  caretVisible,
-  DEEPSEEK_WAVE_TICK_MS,
-  deepseekWaveColumnBg,
-  deepseekWaveDuration,
-  deepseekWaveSpark,
-  deepseekWaveStyleRandom,
-  deepseekWaveTier,
-  deepseekWaveWordHue,
-  deepseekWaveWordVisible,
+  busyChaseFrame,
+  BUSY_CHASE_TICK_MS,
+  caretVisible,
+  DEEP_DIVING_SHIMMER_TICK_MS,
+  DEEPSEEK_WAVE_TICK_MS,
+  deepseekWaveColumnBg,
+  deepseekWaveDuration,
+  deepseekWaveSpark,
+  deepseekWaveStyleRandom,
+  deepseekWaveTier,
+  deepseekWaveWordHue,
+  deepseekWaveWordVisible,
+  deepDivingGradientColor,
+  deepDivingSparkColor,
   effortAboveHigh,
   isOfficialDeepSeekLabel,
   type DeepseekWaveStyle,
@@ -61,7 +65,7 @@ import type { ModelDirectory, ModelRow } from './models.ts'
 import type { ProviderConfiguration, ProviderSettingsDirectory, ProviderTargetView } from './provider-settings.ts'
 import type { QuestionSnapshot, QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
-import type { MentionCandidate } from './mentions.ts'
+import { isPathLikeMentionQuery, type MentionCandidate } from './mentions.ts'
 import type { SubagentFeedView, SubagentRow } from './subagents.ts'
 import { AgentsPanel, EffortPanel, HistoryPanel, JobsPanel, ModePanel, PermissionPanel, PluginPanel, ResumePanel, StatuslinePanel, runClock, SubagentPanel, type JobRow } from './kernel-panels.ts'
 import type { PresetRow } from './presets.ts'
@@ -140,7 +144,16 @@ import {
   type StatusTone,
 } from './render/status.ts'
 import { displayTail, displayText, singleLineText, truncateColumns } from './render/text.ts'
-import { normalizeKeyboardChunk, PASTE_END_MARKER, PASTE_START_MARKER, stripPasteMarkers } from './keyboard.ts'
+import {
+  isVsCodeTerminalEnv,
+  normalizeKeyboardChunk,
+  PASTE_END_MARKER,
+  PASTE_START_MARKER,
+  stripPasteMarkers,
+  stripTerminalFocusEvents,
+  tokenizeRawEditorChunk,
+  type RawEditorToken,
+} from './keyboard.ts'
 import {
   clampScroll,
   followInspectorCursor,
@@ -168,18 +181,22 @@ import {
   deleteBackward,
   deleteForward,
   deleteLastGrapheme,
-  deleteWordBackward,
-  deleteWordForward,
-  editorModel,
+  deleteWordBackward,
+  deleteWordForward,
+  editorModel,
+  editorRowParts,
   insertText,
   type EditResult,
   killToLineEnd,
   killToLineStart,
-  lineBounds,
-  moveCursorBy,
-  moveCursorVertically,
-  moveWordLeft,
-  moveWordRight,
+  moveCursorBy,
+  moveCursorVertically,
+  moveToLineEnd,
+  moveToLineStart,
+  moveWordLeft,
+  moveWordRight,
+  remapStableRange,
+  replaceRangePreservingCursor,
   sanitizeDraftText,
   shouldRecallNavigate,
   splitGraphemes,
@@ -265,7 +282,7 @@ export interface AppProps {
   /** Validate draft image paths without committing attachment objects. */
   inspectImages(paths: readonly string[]): Promise<readonly ImagePathInspection[]>
   /** Validate, normalize and persist images immediately before submission. */
-  prepareImages(paths: readonly string[]): Promise<readonly ImageBlock[]>
+  prepareImages(paths: readonly string[], signal?: AbortSignal): Promise<readonly ImageBlock[]>
   /** Apply one /model selection (with an advertised reasoning effort, when picked); returns the display label. */
   selectModel(row: ModelRow, effortId?: string): string
   /** The /subagent override label, '' when delegated agents follow the current model. */
@@ -355,14 +372,15 @@ function padColumns(text: string, width: number): string {
 }
 
 /** Interval-driven frame counter for one self-contained animated leaf. */
-function useFrames(intervalMs: number): number {
-  const [tick, setTick] = useState(0)
-  useEffect(() => {
-    const id = setInterval(() => setTick(current => current + 1), intervalMs)
+function useFrames(intervalMs: number, active = true): number {
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    if (!active) return
+    const id = setInterval(() => setTick(current => current + 1), intervalMs)
     return () => {
       clearInterval(id)
     }
-  }, [intervalMs])
+  }, [active, intervalMs])
   return tick
 }
 
@@ -381,16 +399,11 @@ function useStableInput(handler: (input: string, key: Key) => void, active: bool
   useInput(stableHandler, { isActive: active })
 }
 
-/**
- * The web StateDot "ongoing" chase in terminal form: three cells of the 3×3
- * ring trail clockwise around the eight outer positions (8 frames × 125ms =
- * the web's 1s cycle). Replaces the plain busy ellipsis as the composer's
- * prompt marker and leads the Deep-diving line.
- */
-function BusyChase(): ReactElement {
-  const tick = useFrames(125)
-  return createElement(Text, { color: inkColor(getPalette().brandBright) }, busyChaseFrame(tick) + ' ')
-}
+/** The original web StateDot chase used by the busy composer marker. */
+function BusyChase(): ReactElement {
+  const tick = useFrames(BUSY_CHASE_TICK_MS)
+  return createElement(Text, { color: inkColor(getPalette().brandBright) }, busyChaseFrame(tick) + ' ')
+}
 
 /** Blinking block caret appended to streaming text. */
 function Caret(): ReactElement {
@@ -398,32 +411,54 @@ function Caret(): ReactElement {
   return createElement(Text, null, caretVisible(tick) ? '▍' : ' ')
 }
 
-/** Blinking input cursor: inverse block while the caret phase is on. */
-function CursorBlock({ char }: { char: string }): ReactElement {
-  const tick = useFrames(530)
-  return createElement(Text, { inverse: caretVisible(tick) || undefined }, char)
-}
+/** One resettable input-caret phase shared by the entire composer. */
+function useCursorBlink(active: boolean): { visible: boolean; reset(): void } {
+  const [epoch, setEpoch] = useState(0)
+  const [visible, setVisible] = useState(true)
+  useEffect(() => {
+    setVisible(true)
+    if (!active) return
+    const id = setInterval(() => setVisible(current => !current), 530)
+    return () => {
+      clearInterval(id)
+    }
+  }, [active, epoch])
+  const reset = useCallback((): void => {
+    setVisible(true)
+    setEpoch(current => current + 1)
+  }, [])
+  return { visible, reset }
+}
 
 /**
- * The busy line, web TurnStatus contract: the StateDot chase leads the plain
- * `Deep diving...` label, with the elapsed clock appended only once the turn
- * has clearly been running (15s) — anchored to `turn/start` so a resumed
- * mid-turn keeps the real time.
- */
-function DeepDivingLine({ since }: { since: number }): ReactElement {
-  useFrames(1000)
-  const elapsed = since === 0 ? 0 : Date.now() - since
-  return createElement(
-    Box,
-    { flexDirection: 'row' },
-    createElement(BusyChase),
-    createElement(
-      Text,
-      { dimColor: true },
-      elapsed >= 15_000 ? `Deep diving... ${runClock(elapsed)}` : 'Deep diving...',
-    ),
-  )
-}
+ * The busy line, web TurnStatus contract: a continuously moving blue gradient
+ * paints the complete `Deep diving...` label, with the elapsed clock appended
+ * only once the turn has clearly been running (15s) — anchored to `turn/start`
+ * so a resumed mid-turn keeps the real time.
+ */
+function DeepDivingLine({ since }: { since: number }): ReactElement {
+  const tick = useFrames(DEEP_DIVING_SHIMMER_TICK_MS)
+  const elapsed = since === 0 ? 0 : Date.now() - since
+  const text = elapsed >= 15_000 ? `✻ Deep diving... ${runClock(elapsed)}` : '✻ Deep diving...'
+  const palette = getPalette()
+  const graphemes = splitGraphemes(text)
+  return createElement(
+    Text,
+    { wrap: 'truncate-end' },
+    ...graphemes.map((grapheme, index) => {
+      const sparkle = grapheme.text === '✻'
+      return createElement(
+        Text,
+        {
+          key: `${grapheme.start}-${grapheme.end}`,
+          color: inkColor(sparkle ? deepDivingSparkColor(tick, palette.brandDeep, palette.brandBright) : deepDivingGradientColor(index, tick, graphemes.length, palette.brandDeep, palette.brandBright)),
+          bold: sparkle || undefined,
+        },
+        grapheme.text,
+      )
+    }),
+  )
+}
 
 /**
  * The streaming buffer rendered with a hard size cap: the live region must
@@ -2054,83 +2089,13 @@ function verboseLine(text: string, columns: number): string {
   return truncateColumns(displayText(text).replace(/\n/gu, ' ↵ ').replace(/\t/gu, '  '), Math.max(1, columns))
 }
 
-/**
- * Keys Ink 5's parser cannot express at the useInput boundary: Home/End
- * arrive with `input === ''` and no flag, and Backspace vs Delete both
- * collapse onto `key.delete`. The composer patches `stdin.read` — the one
- * choke point every Ink input chunk already passes through — and annotates
- * the exact sequences the editor must own; Ink's own view of the same chunk
- * is a no-op for every one of them.
- */
-type RawKeyAnnotation =
-  | 'home'
-  | 'end'
-  | 'delete-backward'
-  | 'delete-word-backward'
-  | 'delete-forward'
-  | 'delete-word-forward'
-  | undefined
-
-/** Identify one whole-chunk key sequence Ink drops or blurs. */
-function annotateRawKey(chunk: string): RawKeyAnnotation {
-  switch (chunk) {
-    case '':
-      return 'delete-backward'
-    case '':
-    case '':
-      return 'delete-word-backward'
-    case '[3~':
-    case '[3;2~':
-      return 'delete-forward'
-    case '[3;3~':
-    case '[3;5~':
-      return 'delete-word-forward'
-    case '':
-    case '[1~':
-    case '[7~':
-    case 'OH':
-      return 'home'
-    case '':
-    case '[4~':
-    case '[8~':
-    case 'OF':
-      return 'end'
-    default:
-      return undefined
-  }
-}
-
-/**
- * One-row editor window keeping the logical cursor visible in long drafts.
- * The caret and its surroundings slice at grapheme boundaries: splitting a
- * star-plane surrogate pair would render an isolated half under the block
- * caret with a width the terminal never draws.
- */
-export function editorWindow(value: string, cursor: number, columns: number): { before: string; caret: string; after: string } {
-  const width = Math.max(1, columns)
-  const normalize = (text: string): string => displayText(text).replace(/\n/gu, '↵').replace(/\t/gu, '  ')
-  const site = clampCursor(value, cursor)
-  const caretSpan = splitGraphemes(value).find(span => span.start === site)
-  const caret = caretSpan === undefined ? ' ' : normalize(caretSpan.text)
-  const rest = value.slice(caretSpan === undefined ? site : caretSpan.end)
-  const remaining = Math.max(0, width - visibleColumns(caret))
-  const afterBudget = Math.min(Math.floor(remaining / 3), visibleColumns(normalize(rest)))
-  const beforeBudget = Math.max(0, remaining - afterBudget)
-  const before = beforeBudget === 0
-    ? ''
-    : displayTail(normalize(value.slice(0, site)), beforeBudget, 1).text
-  const after = afterBudget === 0
-    ? ''
-    : truncateColumns(normalize(rest), afterBudget)
-  return { before, caret, after }
-}
-
-/** The empty-composer placeholder text (shared by the static and wave paths). */
-const COMPOSER_PLACEHOLDER = 'type a message · / commands · @ mentions'
+/** The empty-composer placeholder text (shared by the static and wave paths). */
+const COMPOSER_PLACEHOLDER = 'type a message · / commands · @ mentions'
 
 /** One physical cell of the wave-painted composer row: a char plus styles. */
-interface ComposerCell {
-  char: string
+interface ComposerCell {
+  char: string
+  width?: number
   color?: string
   backgroundColor?: string
   bold?: boolean
@@ -2515,7 +2480,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   refresh(): void
   loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
   inspectImages(paths: readonly string[]): Promise<readonly ImagePathInspection[]>
-  prepareImages(paths: readonly string[]): Promise<readonly ImageBlock[]>
+  prepareImages(paths: readonly string[], signal?: AbortSignal): Promise<readonly ImageBlock[]>
   cyclePermission(): string
   exportTranscript(argument: string): Promise<void>
   renameTitle(argument: string): string
@@ -2546,9 +2511,11 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   maxRows: number
   /** Reports the editor's current physical row count so the live budget stays exact. */
   onEditorRows(rows: number): void
-}): ReactElement {
-  const columns = useStdout().stdout?.columns ?? 80
+}): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
+  const editorColumns = Math.max(1, columns - 6)
   const stdin = useStdin().stdin
+  const focusReporting = isVsCodeTerminalEnv()
   const [value, setValue] = useState('')
   const [cursor, setCursor] = useState(0)
   const valueRef = useRef(value)
@@ -2559,6 +2526,13 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const draftImagesRef = useRef(draftImages)
   draftImagesRef.current = draftImages
   const [preparingImages, setPreparingImages] = useState(false)
+  const prepareAbortRef = useRef<AbortController | undefined>(undefined)
+  const prepareEpochRef = useRef(0)
+  const { visible: cursorVisible, reset: resetCursorBlink } = useCursorBlink(active && !frozen && !preparingImages)
+  useEffect(() => () => {
+    prepareEpochRef.current += 1
+    prepareAbortRef.current?.abort()
+  }, [])
   // Codex textarea editing state: a single-entry kill buffer, the vertical
   // move's preferred display column, the editor's scroll window, and the
   // bracketed-paste marker state. All of it is editor-local; nothing here
@@ -2569,11 +2543,17 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const pasteBracketRef = useRef(false)
   /** Cancels the pending lost-paste safety timer (undefined when disarmed). */
   const pasteBracketCancelRef = useRef<(() => void) | undefined>(undefined)
-  /** Annotation of the stdin chunk Ink is about to deliver to useInput. */
-  const rawAnnotation = useRef<RawKeyAnnotation>(undefined)
+  /** Ordered editor tokens from the stdin chunk Ink is about to deliver. */
+  const rawEditorTokens = useRef<readonly RawEditorToken[] | undefined>(undefined)
+  /** VS Code focus state from xterm focus-report events; starts focused. */
+  const terminalFocusedRef = useRef(true)
   // Codex shell-style recall: the navigation cursor, the saved draft restored
   // on Down past the newest entry, and the boundary-gate anchor.
-  const recall = useRef<RecallState>(beginRecall([], ''))
+  const recall = useRef<RecallState>(beginRecall([], ''))
+
+  useEffect(() => {
+    preferredColumnRef.current = null
+  }, [editorColumns])
 
   // A /history panel acceptance lands as a fill: place the sanitized text at
   // the end of the composer and resume recall from that entry.
@@ -2582,8 +2562,11 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     const safe = sanitizeDraftText(historyFill.text)
     draftImagesRef.current = []
     setDraftImages([])
-    setValue(safe)
-    setCursor(safe.length)
+    valueRef.current = safe
+    cursorRef.current = safe.length
+    setValue(safe)
+    setCursor(safe.length)
+    resetCursorBlink()
     preferredColumnRef.current = null
     setDismissedMenuValue(undefined)
     recall.current = {
@@ -2593,7 +2576,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       lastRecalled: safe,
     }
     historyConsumed()
-  }, [historyFill, recallSpace, historyConsumed])
+  }, [historyFill, recallSpace, historyConsumed, resetCursorBlink])
 
   useEffect(() => {
     setDraftImages((current) => {
@@ -2607,26 +2590,30 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   // as distinct keys, and kitty CSI-u forms parse as unnamed junk Ink would
   // insert as draft text.
   // Patch stdin.read — the single choke point Ink's input loop pulls every
-  // chunk through — to first rewrite decodable CSI-u sequences to their
-  // legacy bytes, then annotate the resulting chunk before Ink emits the
-  // matching 'input' event, so the useInput handler below reads the
-  // annotation for exactly the chunk it is processing. Ink receives and
-  // parses the normalized string; every other byte passes through untouched.
+  // chunk through — to first rewrite decodable CSI-u sequences to their
+  // legacy bytes, then tokenize editor-only sequences before Ink emits the
+  // matching input event. Batched Home/End/Delete/Backspace actions remain
+  // ordered even though Ink invokes useInput only once for the whole chunk.
   useEffect(() => {
     if (stdin === undefined) return
     const originalRead = stdin.read.bind(stdin)
     const patchedRead = function patchedRead(this: typeof stdin, ...args: Parameters<typeof originalRead>) {
-      const chunk = originalRead(...args)
-      if (chunk === null) return chunk
-      const normalized = normalizeKeyboardChunk(typeof chunk === 'string' ? chunk : String(chunk))
-      rawAnnotation.current = annotateRawKey(normalized)
-      return normalized
+      const chunk = originalRead(...args)
+      if (chunk === null) return chunk
+      const normalized = normalizeKeyboardChunk(typeof chunk === 'string' ? chunk : String(chunk))
+      const input = focusReporting
+        ? stripTerminalFocusEvents(normalized, focused => {
+          terminalFocusedRef.current = focused
+        })
+        : normalized
+      rawEditorTokens.current = tokenizeRawEditorChunk(input)
+      return input
     } as typeof stdin.read
     stdin.read = patchedRead
     return () => {
       stdin.read = originalRead as typeof stdin.read
     }
-  }, [stdin])
+  }, [focusReporting, stdin])
 
   // Keep the navigation's recall space fresh while browsing state survives
   // (new local submissions extend the space; the index stays valid unless
@@ -2651,6 +2638,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     : { start: beforeCursor.length - lastLine.length + (tokenMatch.index ?? 0) + (tokenMatch[1]?.length ?? 0), query: tokenMatch[2] ?? '' }
   const mentionActive = mentionToken !== undefined
   const [mentionRows, setMentionRows] = useState<readonly MentionCandidate[]>([])
+  const mentionRequestRef = useRef(0)
 
   const sameImagePath = (left: string, right: string): boolean => (
     process.platform === 'win32' ? left.toLowerCase() === right.toLowerCase() : left === right
@@ -2680,6 +2668,8 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   }
 
   const insertDroppedImages = (paths: readonly string[]): void => {
+    const originalValue = valueRef.current
+    const originalCursor = cursorRef.current
     notify(`checking ${paths.length} image${paths.length === 1 ? '' : 's'}…`)
     void inspectImages(paths).then((inspected) => {
       const additions: DraftImage[] = []
@@ -2694,14 +2684,23 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         notify('those images are already attached', 'warning')
         return
       }
-      const at = cursorRef.current
       const current = valueRef.current
+      const anchor = remapStableRange(originalValue, current, { start: originalCursor, end: originalCursor })
+      if (anchor === undefined) {
+        notify('draft changed at the image drop point; drop the images again', 'warning')
+        return
+      }
+      const at = anchor.start
       const insertion = `${at > 0 && !/\s$/u.test(current.slice(0, at)) ? ' ' : ''}${markers.join(' ')}${current.slice(at) === '' ? '' : ' '}`
-      const next = current.slice(0, at) + insertion + current.slice(at)
-      valueRef.current = next
-      cursorRef.current = at + insertion.length
-      setValue(next)
-      setCursor(cursorRef.current)
+      const edit = replaceRangePreservingCursor(current, cursorRef.current, anchor, insertion)
+      const nextCursor = current === originalValue && cursorRef.current === originalCursor
+        ? at + insertion.length
+        : edit.cursor
+      valueRef.current = edit.value
+      cursorRef.current = nextCursor
+      setValue(edit.value)
+      setCursor(nextCursor)
+      resetCursorBlink()
       const nextImages = [...draftImagesRef.current, ...additions]
       draftImagesRef.current = nextImages
       setDraftImages(nextImages)
@@ -2711,28 +2710,38 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     })
   }
 
-  useEffect(() => {
-    if (!active || !mentionActive) {
-      setMentionRows([])
-      return
-    }
-    const controller = new AbortController()
-    setMentionRows([])
-    loadMentions(mentionToken.query, controller.signal).then(
-      rows => setMentionRows(rows),
-      () => {},
-    )
-    return () => {
-      controller.abort()
-    }
-  }, [active, mentionActive, mentionToken?.query])
+  useEffect(() => {
+    const requestId = mentionRequestRef.current + 1
+    mentionRequestRef.current = requestId
+    if (!active || !mentionActive) {
+      setMentionRows([])
+      return
+    }
+    const controller = new AbortController()
+    const query = mentionToken.query
+    const timer = setTimeout(() => {
+      void loadMentions(query, controller.signal).then(
+        rows => {
+          if (!controller.signal.aborted && mentionRequestRef.current === requestId) setMentionRows(rows)
+        },
+        () => {},
+      )
+    }, 50)
+    return () => {
+      clearTimeout(timer)
+      controller.abort()
+    }
+  }, [active, mentionActive, mentionToken?.query])
 
   // Codex routes keys to the topmost surface first. Completion therefore
   // remains available while a turn runs, and Esc dismisses it before the
-  // same key is allowed to interrupt the turn.
-  const menuActive = (slashActive || mentionActive) && dismissedMenuValue !== value
-  const menuRows: readonly CompletionCandidate[] = mentionActive
-    ? mentionRows.map(row => ({
+  // same key is allowed to interrupt the turn.
+  const menuActive = !preparingImages && (slashActive || mentionActive) && dismissedMenuValue !== value
+  const visibleMentionRows = mentionToken !== undefined && isPathLikeMentionQuery(mentionToken.query)
+    ? mentionRows.filter(row => row.kind !== 'session')
+    : mentionRows
+  const menuRows: readonly CompletionCandidate[] = mentionActive
+    ? visibleMentionRows.map(row => ({
       label: row.label.startsWith('@')
         ? row.label
         : `@${row.label}${row.kind === 'directory' ? '/' : ''}`,
@@ -2741,37 +2750,45 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     }))
     : candidates
 
-  /** Accept the highlighted completion-menu candidate into the draft. */
-  const acceptMenuCandidate = (): void => {
-    if (mentionActive && mentionToken !== undefined) {
-      const row = mentionRows[completionIndex % mentionRows.length]
+  /** Accept the highlighted completion-menu candidate into the draft. */
+  const acceptMenuCandidate = (): void => {
+    if (mentionActive && mentionToken !== undefined) {
+      if (visibleMentionRows.length === 0) return
+      const row = visibleMentionRows[completionIndex % visibleMentionRows.length]
       if (row !== undefined) {
         if (row.kind === 'file' && row.path !== undefined && looksLikeImagePath(row.path)) {
           const tokenText = value.slice(mentionToken.start, cursor)
           const start = mentionToken.start
+          const originalValue = value
           notify(`checking image ${basename(row.path)}…`)
           void inspectImages([row.path]).then((inspected) => {
             const inspection = inspected[0]
             if (inspection === undefined) return
             const current = valueRef.current
-            if (current.slice(start, start + tokenText.length) !== tokenText) return
+            const anchor = remapStableRange(originalValue, current, { start, end: start + tokenText.length })
+            if (anchor === undefined || current.slice(anchor.start, anchor.end) !== tokenText) {
+              notify('draft changed around the image mention; select it again', 'warning')
+              return
+            }
             if (draftImagesRef.current.some(image => sameImagePath(image.path, inspection.path))) {
-              const next = current.slice(0, start) + current.slice(start + tokenText.length)
-              valueRef.current = next
-              cursorRef.current = start
-              setValue(next)
-              setCursor(start)
-              setDismissedMenuValue(next)
+              const edit = replaceRangePreservingCursor(current, cursorRef.current, anchor, '')
+              valueRef.current = edit.value
+              cursorRef.current = edit.cursor
+              setValue(edit.value)
+              setCursor(edit.cursor)
+              resetCursorBlink()
+              setDismissedMenuValue(edit.value)
               notify(`${inspection.name} is already attached`, 'warning')
               return
             }
             const marker = uniqueImageMarker(inspection.name, 'mention')
-            const next = current.slice(0, start) + marker + current.slice(start + tokenText.length)
-            valueRef.current = next
-            cursorRef.current = start + marker.length
-            setValue(next)
-            setCursor(cursorRef.current)
-            setDismissedMenuValue(next)
+            const edit = replaceRangePreservingCursor(current, cursorRef.current, anchor, marker)
+            valueRef.current = edit.value
+            cursorRef.current = edit.cursor
+            setValue(edit.value)
+            setCursor(edit.cursor)
+            resetCursorBlink()
+            setDismissedMenuValue(edit.value)
             registerDraftImage(inspection, marker)
             notify(`${inspection.name} ready for the next message`)
           }, (reason: unknown) => {
@@ -2783,44 +2800,149 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         }
         // Session rows carry the canonical @[label](dsh-session:…) token;
         // file rows insert `@path` (directories keep their trailing slash).
-        const insertion = row.label.startsWith('@')
-          ? row.label
-          : `@${row.label}${row.kind === 'directory' ? '/' : ''}`
-        setValue(value.slice(0, mentionToken.start) + insertion + value.slice(cursor))
-        setCursor(mentionToken.start + insertion.length)
-      }
-    } else {
-      const candidate = candidates[completionIndex % candidates.length]
-      if (candidate !== undefined) {
-        setValue(`${candidate.label} `)
-        setCursor(candidate.label.length + 1)
-      }
+        const insertion = row.label.startsWith('@')
+          ? row.label
+          : `@${row.label}${row.kind === 'directory' ? '/' : ''}`
+        const nextValue = value.slice(0, mentionToken.start) + insertion + value.slice(cursor)
+        const nextCursor = mentionToken.start + insertion.length
+        valueRef.current = nextValue
+        cursorRef.current = nextCursor
+        setValue(nextValue)
+        setCursor(nextCursor)
+        resetCursorBlink()
+      }
+    } else {
+      if (candidates.length === 0) return
+      const candidate = candidates[completionIndex % candidates.length]
+      if (candidate !== undefined) {
+        const nextValue = `${candidate.label} `
+        const nextCursor = candidate.label.length + 1
+        valueRef.current = nextValue
+        cursorRef.current = nextCursor
+        setValue(nextValue)
+        setCursor(nextCursor)
+        resetCursorBlink()
+      }
     }
     setCompletionIndex(0)
     setDismissedMenuValue(undefined)
   }
 
   /** Apply one editor edit: draft, cursor, kill buffer, menu reset. */
-  const applyEdit = (edit: EditResult): void => {
-    if (edit.killed !== undefined && edit.killed !== '') killRef.current = edit.killed
-    setValue(edit.value)
-    setCursor(edit.cursor)
+  const applyEdit = (edit: EditResult): void => {
+    if (edit.killed !== undefined && edit.killed !== '') killRef.current = edit.killed
+    valueRef.current = edit.value
+    cursorRef.current = edit.cursor
+    setValue(edit.value)
+    setCursor(edit.cursor)
+    resetCursorBlink()
     preferredColumnRef.current = null
     setCompletionIndex(0)
     setDismissedMenuValue(undefined)
   }
 
   /** Move the cursor without editing; horizontal moves clear the column preference. */
-  const moveCursorTo = (next: number): void => {
-    if (next === cursor) return
-    setCursor(next)
-    preferredColumnRef.current = null
-  }
-
-  useInput((input, key) => {
+  const moveCursorTo = (next: number): void => {
+    resetCursorBlink()
+    if (next === cursorRef.current) return
+    cursorRef.current = next
+    setCursor(next)
+    preferredColumnRef.current = null
+  }
+
+  /** Apply an ordered raw-key batch against one current draft snapshot. */
+  const applyRawEditorTokens = (tokens: readonly RawEditorToken[]): void => {
+    let nextValue = valueRef.current
+    let nextCursor = cursorRef.current
+    for (const token of tokens) {
+      if (token.kind === 'text') {
+        const edit = insertText(nextValue, nextCursor, token.text)
+        nextValue = edit.value
+        nextCursor = edit.cursor
+        continue
+      }
+      if (token.kind === 'home') {
+        nextCursor = moveToLineStart(nextValue, nextCursor, false)
+        continue
+      }
+      if (token.kind === 'end') {
+        nextCursor = moveToLineEnd(nextValue, nextCursor, false)
+        continue
+      }
+      const edit = token.kind === 'delete-backward'
+        ? deleteBackward(nextValue, nextCursor)
+        : token.kind === 'delete-word-backward'
+          ? deleteWordBackward(nextValue, nextCursor)
+          : token.kind === 'delete-forward'
+            ? deleteForward(nextValue, nextCursor)
+            : deleteWordForward(nextValue, nextCursor)
+      if (edit.killed !== undefined && edit.killed !== '') killRef.current = edit.killed
+      nextValue = edit.value
+      nextCursor = edit.cursor
+    }
+    valueRef.current = nextValue
+    cursorRef.current = nextCursor
+    setValue(nextValue)
+    setCursor(nextCursor)
+    resetCursorBlink()
+    preferredColumnRef.current = null
+    setCompletionIndex(0)
+    setDismissedMenuValue(undefined)
+  }
+
+  const cancelImageSubmission = (): void => {
+    prepareEpochRef.current += 1
+    prepareAbortRef.current?.abort()
+    prepareAbortRef.current = undefined
+    setPreparingImages(false)
+    dismissNotice()
+    notify('image submission cancelled', 'warning')
+  }
+
+  /** Move through visual rows first, then cross history at the true edge. */
+  const navigateVertical = (direction: -1 | 1): void => {
+    const currentValue = valueRef.current
+    const currentCursor = cursorRef.current
+    const model = editorModel(currentValue, editorColumns)
+    const preferred = preferredColumnRef.current ?? caretSite(model, currentCursor).column
+    const next = moveCursorVertically(model, currentCursor, preferred, direction)
+    if (next !== currentCursor) {
+      cursorRef.current = next
+      setCursor(next)
+      resetCursorBlink()
+      preferredColumnRef.current = preferred
+      return
+    }
+    if (recall.current.entries.length > 0
+      && shouldRecallNavigate(currentValue, currentCursor, recall.current.lastRecalled, direction)) {
+      const step = direction < 0 ? recallOlder(recall.current, currentValue) : recallNewer(recall.current)
+      recall.current = step.state
+      if (step.entry !== undefined) {
+        const safe = sanitizeDraftText(step.entry)
+        valueRef.current = safe
+        cursorRef.current = safe.length
+        setValue(safe)
+        setCursor(safe.length)
+        preferredColumnRef.current = null
+        setDismissedMenuValue(undefined)
+      }
+    }
+    resetCursorBlink()
+  }
+
+  useStableInput((input, key) => {
     // Modal ownership: approval/question/model dialogs consume all keys.
     if (!active) return
-    if (preparingImages) return
+    // React may not have committed the previous Tab completion render before
+    // the next terminal byte arrives. Read the synchronous editor refs so a
+    // completion followed immediately by text edits never uses stale closure
+    // state.
+    const liveValue = valueRef.current
+    const liveCursor = cursorRef.current
+    if (preparingImages) {
+      if (key.escape || (key.ctrl && input === 'c')) cancelImageSubmission()
+      return
+    }
     // Deletion confirm owns the box: y proceeds, anything else cancels.
     // Typed in the INPUT BOX (codex delete-confirm): the keystroke is echoed
     // as the box's own prompt, not an invisible panel keypress.
@@ -2842,10 +2964,11 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       }
       return
     }
-    // Ctrl+R toggles the thinking display (Claude-Code reasoning fold).
-    if (key.ctrl && input === 'r') {
-      toggleReasoning()
-      return
+    // Ctrl+R toggles the thinking display (Claude-Code reasoning fold).
+    if (key.ctrl && input === 'r') {
+      if (focusReporting && !terminalFocusedRef.current) return
+      toggleReasoning()
+      return
     }
     // Ctrl+O opens the bounded transcript inspector (Claude-Code convention,
     // adapted to append-only static rows): one history entry at a time with
@@ -2858,11 +2981,14 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     // cancelled, a non-empty draft is cleared, and only an idle empty input
     // exits. Ctrl+D always means exit but refuses mid-turn.
     if (key.ctrl && input === 'c') {
-      if (busy) {
-        interrupt()
-      } else if (value !== '') {
+      if (busy) {
+        interrupt()
+      } else if (liveValue !== '') {
+        valueRef.current = ''
+        cursorRef.current = 0
         setValue('')
         setCursor(0)
+        resetCursorBlink()
         draftImagesRef.current = []
         setDraftImages([])
         setCompletionIndex(0)
@@ -2875,8 +3001,8 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     if (key.ctrl && input === 'd') {
       // Codex: Ctrl+D deletes forward while a draft exists; the app-level
       // exit only fires from an empty composer.
-      if (value !== '') {
-        applyEdit(deleteForward(value, cursor))
+      if (liveValue !== '') {
+        applyEdit(deleteForward(liveValue, liveCursor))
         return
       }
       if (busy) notify('cancel the running turn before exiting (Esc or Ctrl+C)', 'warning')
@@ -2885,7 +3011,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     }
     if (key.escape) {
       if (menuActive) {
-        setDismissedMenuValue(value)
+        setDismissedMenuValue(liveValue)
         return
       }
       if (hasNotice) {
@@ -2897,14 +3023,14 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     }
     // Delete on the empty composer cancels the newest queued message (the
     // web queue-mirror contract: the durable splice drops the pending row).
-    if (key.delete && value === '' && queued.length > 0) {
+    if (key.delete && liveValue === '' && queued.length > 0) {
       cancelQueued(queued[queued.length - 1]!.messageId)
       return
     }
     if (key.return) {
       // A newline inside an open bracketed paste inserts; it never submits.
       if (pasteBracketRef.current) {
-        applyEdit(insertText(value, cursor, '\n'))
+        applyEdit(insertText(liveValue, liveCursor, '\n'))
         return
       }
       // Enter on an open completion menu accepts the highlighted candidate
@@ -2913,18 +3039,24 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       // exactly, in which case Enter submits it (typing a full "/effort" and
       // pressing return must run the command, not re-accept its own text).
       if (menuActive) {
-        const exactSlash = !mentionActive && candidates.some(candidate => candidate.label === value)
+        const exactSlash = !mentionActive && candidates.some(candidate => candidate.label === liveValue)
         if (!exactSlash) {
           acceptMenuCandidate()
           return
         }
       }
-      const text = value.trim()
+      const text = liveValue.trim()
       if (draftImagesRef.current.length > 0) {
+        const controller = new AbortController()
+        const epoch = prepareEpochRef.current + 1
+        prepareEpochRef.current = epoch
+        prepareAbortRef.current = controller
         setPreparingImages(true)
         notify(`processing ${draftImagesRef.current.length} image${draftImagesRef.current.length === 1 ? '' : 's'}…`)
         const snapshot = draftImagesRef.current
-        void prepareImages(snapshot.map(image => image.path)).then((images) => {
+        void prepareImages(snapshot.map(image => image.path), controller.signal).then((images) => {
+          if (controller.signal.aborted || prepareEpochRef.current !== epoch) return
+          prepareAbortRef.current = undefined
           setPreparingImages(false)
           valueRef.current = ''
           cursorRef.current = 0
@@ -2943,14 +3075,19 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
           if (busy) steer(text, images)
           else dispatch(text, images)
         }, (reason: unknown) => {
+          if (controller.signal.aborted || prepareEpochRef.current !== epoch) return
+          prepareAbortRef.current = undefined
           setPreparingImages(false)
           notify(`image submission failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
         })
         return
       }
+      valueRef.current = ''
+      cursorRef.current = 0
       setValue('')
-      setCursor(0)
-      setCompletionIndex(0)
+      setCursor(0)
+      resetCursorBlink()
+      setCompletionIndex(0)
       setDismissedMenuValue(undefined)
       if (text === '') return
       dismissNotice()
@@ -3094,10 +3231,19 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       dispatch(text)
       return
     }
-    // Ink exposes Ctrl+J as a bare LF and Alt+Enter as a bare CR after
-    // stripping the leading escape. Neither is a multiline shortcut.
-    if (input === '\n' || input === '\r') return
-    if (menuActive && key.upArrow) {
+    // Ink exposes Ctrl+J as a bare LF and Alt+Enter as a bare CR after
+    // stripping the leading escape. Neither is a multiline shortcut.
+    if (input === '\n' || input === '\r') return
+    // A fast Tab followed by text can arrive as one readable chunk in an
+    // integrated terminal. Accept the candidate first, then apply the
+    // remaining characters against the synchronously updated editor refs.
+    if (menuActive && (key.tab || input.startsWith('\t'))) {
+      const remainder = key.tab ? '' : input.slice(1)
+      acceptMenuCandidate()
+      if (remainder !== '') applyEdit(insertText(valueRef.current, cursorRef.current, remainder))
+      return
+    }
+    if (menuActive && key.upArrow) {
       setCompletionIndex(index => (index + menuRows.length - 1) % menuRows.length)
       return
     }
@@ -3105,135 +3251,86 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       setCompletionIndex(index => (index + 1) % menuRows.length)
       return
     }
-    // Raw-annotated keys (Home/End, the delete family): Ink's own flags for
-    // the same chunk are blank or blurred, so the read-patch annotation is
-    // authoritative whenever it is set.
-    const rawKey = rawAnnotation.current
-    if (rawKey !== undefined) {
-      if (rawKey === 'home') moveCursorTo(lineBounds(value, cursor).start)
-      else if (rawKey === 'end') moveCursorTo(lineBounds(value, cursor).end)
-      else if (rawKey === 'delete-backward') applyEdit(deleteBackward(value, cursor))
-      else if (rawKey === 'delete-word-backward') applyEdit(deleteWordBackward(value, cursor))
-      else if (rawKey === 'delete-forward') applyEdit(deleteForward(value, cursor))
-      else applyEdit(deleteWordForward(value, cursor))
-      return
-    }
-    if (key.upArrow || key.downArrow) {
-      // Codex boundary gate: shell recall runs from an empty draft, or from
-      // a boundary of a draft that still matches the last recalled entry;
-      // every interior Up/Down moves the caret across the multiline draft.
-      if (recall.current.entries.length > 0 && shouldRecallNavigate(value, cursor, recall.current.lastRecalled)) {
-        const step = key.upArrow ? recallOlder(recall.current, value) : recallNewer(recall.current)
-        recall.current = step.state
-        if (step.entry !== undefined) {
-          const safe = sanitizeDraftText(step.entry)
-          setValue(safe)
-          setCursor(safe.length)
-          preferredColumnRef.current = null
-          setDismissedMenuValue(undefined)
-        }
-        return
-      }
-      const model = editorModel(value, Math.max(1, columns - 6))
-      const preferred = preferredColumnRef.current ?? caretSite(model, cursor).column
-      const next = moveCursorVertically(model, cursor, preferred, key.upArrow ? -1 : 1)
-      if (next !== cursor) {
-        setCursor(next)
-        preferredColumnRef.current = preferred
-      }
-      return
-    }
+    // Batched Home/End/Delete/Backspace sequences bypass Ink's one-key parser
+    // and reduce against one current editor snapshot in their original order.
+    const rawTokens = rawEditorTokens.current
+    rawEditorTokens.current = undefined
+    if (rawTokens !== undefined) {
+      applyRawEditorTokens(rawTokens)
+      return
+    }
+    if (key.upArrow || key.downArrow) {
+      navigateVertical(key.upArrow ? -1 : 1)
+      return
+    }
     // Ctrl+P / Ctrl+N share the Up/Down contract (Codex binds them to
     // move_up/move_down, so the history gate applies first).
-    if (key.ctrl && (input === 'p' || input === 'n')) {
-      const up = input === 'p'
-      if (recall.current.entries.length > 0 && shouldRecallNavigate(value, cursor, recall.current.lastRecalled)) {
-        const step = up ? recallOlder(recall.current, value) : recallNewer(recall.current)
-        recall.current = step.state
-        if (step.entry !== undefined) {
-          const safe = sanitizeDraftText(step.entry)
-          setValue(safe)
-          setCursor(safe.length)
-          preferredColumnRef.current = null
-          setDismissedMenuValue(undefined)
-        }
-        return
-      }
-      const model = editorModel(value, Math.max(1, columns - 6))
-      const preferred = preferredColumnRef.current ?? caretSite(model, cursor).column
-      const next = moveCursorVertically(model, cursor, preferred, up ? -1 : 1)
-      if (next !== cursor) {
-        setCursor(next)
-        preferredColumnRef.current = preferred
-      }
-      return
-    }
-    if (key.tab && menuActive) {
-      acceptMenuCandidate()
-      return
-    }
-    // Codex editor keymap: Alt/Ctrl+arrows and Alt+B/F move by word pieces;
-    // plain arrows and Ctrl+B/F move by grapheme.
-    if (key.leftArrow) {
-      moveCursorTo(key.meta || key.ctrl ? moveWordLeft(value, cursor) : moveCursorBy(value, cursor, -1))
-      return
-    }
-    if (key.rightArrow) {
-      moveCursorTo(key.meta || key.ctrl ? moveWordRight(value, cursor) : moveCursorBy(value, cursor, 1))
-      return
-    }
-    if (key.meta && input === 'b') {
-      moveCursorTo(moveWordLeft(value, cursor))
-      return
-    }
-    if (key.meta && input === 'f') {
-      moveCursorTo(moveWordRight(value, cursor))
-      return
-    }
-    if (key.ctrl && input === 'b') {
-      moveCursorTo(moveCursorBy(value, cursor, -1))
-      return
-    }
-    if (key.ctrl && input === 'f') {
-      moveCursorTo(moveCursorBy(value, cursor, 1))
-      return
+    if (key.ctrl && (input === 'p' || input === 'n')) {
+      navigateVertical(input === 'p' ? -1 : 1)
+      return
     }
+    // Codex editor keymap: Alt/Ctrl+arrows and Alt+B/F move by word pieces;
+    // plain arrows and Ctrl+B/F move by grapheme.
+    if (key.leftArrow) {
+      moveCursorTo(key.meta || key.ctrl ? moveWordLeft(liveValue, liveCursor) : moveCursorBy(liveValue, liveCursor, -1))
+      return
+    }
+    if (key.rightArrow) {
+      moveCursorTo(key.meta || key.ctrl ? moveWordRight(liveValue, liveCursor) : moveCursorBy(liveValue, liveCursor, 1))
+      return
+    }
+    if (key.meta && input === 'b') {
+      moveCursorTo(moveWordLeft(liveValue, liveCursor))
+      return
+    }
+    if (key.meta && input === 'f') {
+      moveCursorTo(moveWordRight(liveValue, liveCursor))
+      return
+    }
+    if (key.ctrl && input === 'b') {
+      moveCursorTo(moveCursorBy(liveValue, liveCursor, -1))
+      return
+    }
+    if (key.ctrl && input === 'f') {
+      moveCursorTo(moveCursorBy(liveValue, liveCursor, 1))
+      return
+    }
     // Ctrl+W and Alt+Backspace delete the previous word piece into the kill
-    // buffer; Alt+D and the raw Ctrl/Alt+Delete variants kill forward.
-    if (key.ctrl && input === 'w') {
-      applyEdit(deleteWordBackward(value, cursor))
-      return
-    }
-    if (key.meta && input === 'd') {
-      applyEdit(deleteWordForward(value, cursor))
-      return
+    // buffer; Alt+D and the raw Ctrl/Alt+Delete variants kill forward.
+    if (key.ctrl && input === 'w') {
+      applyEdit(deleteWordBackward(liveValue, liveCursor))
+      return
+    }
+    if (key.meta && input === 'd') {
+      applyEdit(deleteWordForward(liveValue, liveCursor))
+      return
     }
     // Un-annotated backspace/delete (Ink maps both  and  here):
-    // delete the grapheme before the cursor.
-    if (key.backspace || key.delete) {
-      applyEdit(deleteBackward(value, cursor))
-      return
+    // delete the grapheme before the cursor.
+    if (key.backspace || key.delete) {
+      applyEdit(deleteBackward(liveValue, liveCursor))
+      return
     }
     // Readline parity over the LOGICAL line: A/E to its ends, U/K kill to
-    // them (filling the single kill buffer), Y yanks it back.
-    if (key.ctrl && input === 'a') {
-      moveCursorTo(lineBounds(value, cursor).start)
-      return
-    }
-    if (key.ctrl && input === 'e') {
-      moveCursorTo(lineBounds(value, cursor).end)
-      return
-    }
-    if (key.ctrl && input === 'u') {
-      applyEdit(killToLineStart(value, cursor))
-      return
-    }
-    if (key.ctrl && input === 'k') {
-      applyEdit(killToLineEnd(value, cursor))
-      return
-    }
-    if (key.ctrl && input === 'y') {
-      if (killRef.current !== '') applyEdit(insertText(value, cursor, killRef.current))
+    // them (filling the single kill buffer), Y yanks it back.
+    if (key.ctrl && input === 'a') {
+      moveCursorTo(moveToLineStart(liveValue, liveCursor, true))
+      return
+    }
+    if (key.ctrl && input === 'e') {
+      moveCursorTo(moveToLineEnd(liveValue, liveCursor, true))
+      return
+    }
+    if (key.ctrl && input === 'u') {
+      applyEdit(killToLineStart(liveValue, liveCursor))
+      return
+    }
+    if (key.ctrl && input === 'k') {
+      applyEdit(killToLineEnd(liveValue, liveCursor))
+      return
+    }
+    if (key.ctrl && input === 'y') {
+      if (killRef.current !== '') applyEdit(insertText(liveValue, liveCursor, killRef.current))
       return
     }
     // Ctrl+L refreshes the screen (readline convention): raw ANSI clear
@@ -3275,11 +3372,11 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         insertDroppedImages(droppedPaths)
         return
       }
-      applyEdit(insertText(value, cursor, text))
+      applyEdit(insertText(valueRef.current, cursorRef.current, text))
     }
-  })
-
-  // The DeepSeek easter-egg wave owns its 33ms tick HERE instead of in App:
+  }, active)
+
+  // The DeepSeek easter-egg wave owns its 33ms tick HERE instead of in App:
   // the interval re-renders only the composer band at 30fps, never the whole
   // tree. App drives the tier/style pair on a model switch; this local effect
   // starts the sweep whenever that pair changes (App picks a NEW random style
@@ -3299,7 +3396,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       setWaveTick(0)
     }
   }, [waveTier, waveStyle])
-  const waveActive = waveTick !== null && waveTier !== null && waveStyle !== null
+  const waveActive = !preparingImages && waveTick !== null && waveTier !== null && waveStyle !== null
     && waveTick * DEEPSEEK_WAVE_TICK_MS < deepseekWaveDuration(waveTier, waveStyle)
   useEffect(() => {
     if (!waveActive) return
@@ -3325,8 +3422,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   // column-safe physical rows, with the caret mapped to its exact row and
   // column. Computed before the frozen path so the row report below runs
   // unconditionally.
-  const editorColumns = Math.max(1, columns - 6)
-  const editorViewModel = editorModel(value, editorColumns)
+  const editorViewModel = editorModel(value, editorColumns)
   const clampedCursor = clampCursor(value, cursor)
   const caret = caretSite(editorViewModel, clampedCursor)
   const editorWindowRows = Math.min(editorViewModel.rows.length, Math.max(1, maxRows))
@@ -3352,7 +3448,7 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const bandWidth = Math.max(1, columns - 1)
   const bandBg = inkColor(getPalette().composerBand)
   const bandFill = (consumed: number): string => ' '.repeat(Math.max(0, bandWidth - consumed))
-  const band = (content: ReactElement): ReactElement => createElement(
+  const band = (content: ReactElement): ReactElement => createElement(
     Box,
     { flexDirection: 'column', width: bandWidth },
     createElement(Text, { backgroundColor: bandBg }, ' '.repeat(bandWidth)),
@@ -3390,141 +3486,138 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     rows: menuRows,
   })
 
-  // The multiline editor (idle, busy, or after the wave): every visible
-  // physical row renders inside the band, the prompt marker leading the
-  // first and a two-space indent aligning continuations under the text
-  // column — the same gutter reply rows use. The caret is the inverse block
-  // on its exact grapheme, so wide CJK cells and emoji clusters position the
-  // block precisely. The prompt marker keeps the tier accent while an
-  // official DeepSeek model is applied, restoring the static brand ❯ on any
-  // other route.
-  const editorRows: ReactElement[] = []
-  for (let index = editorWindowStart; index < Math.min(editorViewModel.rows.length, editorWindowStart + editorWindowRows); index += 1) {
-    const row = editorViewModel.rows[index]!
-    const caretAt = index === caret.row ? row.offsets.indexOf(clampedCursor) : -1
-    const before = caretAt > 0 ? row.text.slice(0, row.cuts[caretAt]!) : ''
-    const caretChar = caretAt >= 0 && caretAt < row.cuts.length - 1 ? row.text.slice(row.cuts[caretAt]!, row.cuts[caretAt + 1]!) : ' '
-    const after = caretAt < 0
-      ? row.text
-      : caretAt < row.cuts.length - 1
-        ? row.text.slice(row.cuts[caretAt + 1]!)
-        : ''
-    const placeholder = index === 0 && value === '' && !busy
-    const tail = placeholder ? COMPOSER_PLACEHOLDER : after
-    const consumed = 2 + visibleColumns(before) + visibleColumns(caretChar) + visibleColumns(tail)
-    editorRows.push(createElement(
-      Text,
-      { key: index, backgroundColor: bandBg, wrap: 'truncate-end' },
-      index === 0
-        ? busy
-          ? createElement(BusyChase)
-          : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `)
-        : '  ',
-      before,
-      createElement(CursorBlock, { key: 'caret', char: caretChar }),
-      placeholder
-        ? createElement(Text, { dimColor: true }, COMPOSER_PLACEHOLDER)
-        : after,
+  // Every state reuses this exact multiline editor window. Only the caret row
+  // owns an inverse block; non-caret rows render their text without a hidden
+  // spacer or a second blink timer.
+  const editorRows: ReactElement[] = []
+  for (let index = editorWindowStart; index < Math.min(editorViewModel.rows.length, editorWindowStart + editorWindowRows); index += 1) {
+    const row = editorViewModel.rows[index]!
+    const parts = editorRowParts(row, index, caret.row, clampedCursor, !preparingImages)
+    const placeholder = index === 0 && value === '' && !busy && !preparingImages
+    const tail = placeholder ? COMPOSER_PLACEHOLDER : parts.after
+    const consumed = 2 + visibleColumns(parts.before) + visibleColumns(parts.caret) + visibleColumns(tail)
+    editorRows.push(createElement(
+      Text,
+      { key: index, backgroundColor: bandBg, wrap: 'truncate-end' },
+      index === 0
+        ? preparingImages
+          ? createElement(Text, { color: inkColor(getPalette().warn), bold: true }, '… ')
+          : busy
+            ? createElement(BusyChase)
+            : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `)
+        : '  ',
+      parts.before,
+      parts.hasCaret
+        ? createElement(Text, { key: 'caret', inverse: cursorVisible || undefined }, parts.caret)
+        : null,
+      placeholder
+        ? createElement(Text, { dimColor: true }, COMPOSER_PLACEHOLDER)
+        : parts.after,
       bandFill(consumed),
     ))
-  }
-  const staticEditor = createElement(Box, { flexDirection: 'column' }, ...editorRows)
-
-  // Wave band: all three rows assembled column by column, each cell carrying
-  // the sampled wave `backgroundColor` (null outside the crest → the band
-  // background), so the crest sweeps the FULL band — blank rows, prompt,
-  // draft, cursor, placeholder, and the trailing fill — with a per-row phase
-  // offset that flows the wave down the band. The deepseek tier drops the
-  // `· ✦ ✧` sparkles into the rightmost blank cell from 900ms on.
-  const waveRow = (): ReactElement => {
-    const hues = deepseekWaveHues(waveTier!)
-    const style = waveStyle!
-    const bandRgb = getPalette().composerBand
-    const waveBg = (row: number, column: number): string => {
-      const rgb = deepseekWaveColumnBg(waveTick!, column, bandWidth, waveTier!, style, hues, bandRgb, row, 3)
-      return rgb === null ? bandBg : inkColor(rgb)
-    }
-    const blankBandRow = (row: number): ReactElement => {
-      const blanks: ComposerCell[] = []
-      while (blanks.length < bandWidth) blanks.push({ char: ' ', backgroundColor: waveBg(row, blanks.length) })
-      return createElement(Text, { key: row }, ...waveRowSpans(blanks))
-    }
-    const waveEditor = editorWindow(value, cursor, Math.max(1, columns - 7))
-    const cells: ComposerCell[] = [
-      { char: ' ', backgroundColor: waveBg(1, 0) },
-      { char: ' ', backgroundColor: waveBg(1, 1) },
-      { char: promptGlyph, color: promptColor, bold: true, backgroundColor: waveBg(1, 2) },
-      { char: ' ', color: promptColor, backgroundColor: waveBg(1, 3) },
-    ]
-    for (const char of waveEditor.before) {
-      cells.push({ char, backgroundColor: waveBg(1, cells.length) })
-    }
-    cells.push({ char: waveEditor.caret, inverse: true, backgroundColor: waveBg(1, cells.length) })
-    if (value === '' && !busy) {
-      for (let at = 0; at < COMPOSER_PLACEHOLDER.length; at += 1) {
-        cells.push({ char: COMPOSER_PLACEHOLDER[at]!, dim: true, backgroundColor: waveBg(1, cells.length) })
-      }
-    } else {
-      for (const char of waveEditor.after) {
-        cells.push({ char, backgroundColor: waveBg(1, cells.length) })
-      }
-    }
-    while (cells.length < bandWidth) {
-      cells.push({ char: ' ', backgroundColor: waveBg(1, cells.length) })
-    }
-    // The wordmark rides the wave's middle: `deepseek` on the official
-    // tiers, `Into the Unknown` on the non-DeepSeek high-effort variant —
-    // in the tier's cycled hues, placed in the row's mid-section and only
-    // over blank or placeholder cells — real draft text is never covered.
-    if (deepseekWaveWordVisible(waveTick!, waveTier!, style)) {
-      const word = waveTier === 'unknown' ? 'Into the Unknown' : 'deepseek'
-      const start = Math.max(2, Math.floor((bandWidth - word.length) / 2))
-      let clear = true
-      for (let at = 0; at < word.length; at += 1) {
-        const cell = cells[start + at]
-        if (cell === undefined || (cell.char !== ' ' && cell.dim !== true)) { clear = false; break }
-      }
-      if (clear) {
-        for (let at = 0; at < word.length; at += 1) {
-          const cell = cells[start + at]!
-          cell.char = word[at]!
-          cell.color = inkColor(deepseekWaveWordHue(at, hues))
-          cell.bold = true
-          cell.dim = false
-        }
-      }
-    }
-    // The tail sparkles belong to the Wave style's pro tiers only (the
-    // deepseek and unknown tiers share the Ultra parameters — Codex paints
-    // spark_frame on Wave+Ultra).
-    if ((waveTier === 'deepseek' || waveTier === 'unknown') && style === 'wave') {
-      const spark = deepseekWaveSpark(waveTick!)
-      if (spark !== null) {
-        const last = cells[cells.length - 1]
-        if (last !== undefined && last.char === ' ') {
-          last.char = spark
-          last.color = promptColor
-          last.bold = true
-          last.dim = false
-        }
-      }
-    }
-    return createElement(
-      Box,
-      { flexDirection: 'column', width: bandWidth },
-      blankBandRow(0),
-      createElement(Text, { wrap: 'truncate-end' }, ...waveRowSpans(cells)),
-      blankBandRow(2),
-    )
-  }
+  }
+  const staticEditor = createElement(Box, { flexDirection: 'column' }, ...editorRows)
+
+  // The wave paints the SAME visible rows and caret site as the static path.
+  // Graphemes remain atomic and every background sample advances by terminal
+  // display columns, so CJK and emoji cannot move the caret or wrap the band.
+  const waveRow = (): ReactElement => {
+    const hues = deepseekWaveHues(waveTier!)
+    const style = waveStyle!
+    const bandRgb = getPalette().composerBand
+    const visibleRows = editorViewModel.rows.slice(editorWindowStart, editorWindowStart + editorWindowRows)
+    const totalBandRows = visibleRows.length + 2
+    const waveBg = (row: number, column: number): string => {
+      const rgb = deepseekWaveColumnBg(waveTick!, column, bandWidth, waveTier!, style, hues, bandRgb, row, totalBandRows)
+      return rgb === null ? bandBg : inkColor(rgb)
+    }
+    const blankBandRow = (row: number): ReactElement => {
+      const blanks: ComposerCell[] = []
+      for (let column = 0; column < bandWidth; column += 1) {
+        blanks.push({ char: ' ', width: 1, backgroundColor: waveBg(row, column) })
+      }
+      return createElement(Text, { key: `blank-${row}` }, ...waveRowSpans(blanks))
+    }
+    const cellIndexAtColumn = (cells: readonly ComposerCell[], target: number): number | undefined => {
+      let column = 0
+      for (let index = 0; index < cells.length; index += 1) {
+        if (column === target) return index
+        column += cells[index]!.width ?? visibleColumns(cells[index]!.char)
+        if (column > target) return undefined
+      }
+      return undefined
+    }
+    const editorWaveRows = visibleRows.map((row, visibleIndex) => {
+      const sourceIndex = editorWindowStart + visibleIndex
+      const bandRow = visibleIndex + 1
+      const parts = editorRowParts(row, sourceIndex, caret.row, clampedCursor)
+      const placeholder = sourceIndex === 0 && value === '' && !busy
+      const cells: ComposerCell[] = []
+      let usedColumns = 0
+      const push = (char: string, extra: Omit<ComposerCell, 'char' | 'width' | 'backgroundColor'> = {}): void => {
+        const width = visibleColumns(char)
+        cells.push({ char, width, backgroundColor: waveBg(bandRow, usedColumns), ...extra })
+        usedColumns += width
+      }
+      if (sourceIndex === 0) {
+        push(promptGlyph, { color: promptColor, bold: true })
+        push(' ', { color: promptColor })
+      } else {
+        push(' ')
+        push(' ')
+      }
+      for (const span of splitGraphemes(parts.before)) push(span.text)
+      if (parts.hasCaret) push(parts.caret, { inverse: cursorVisible })
+      const tail = placeholder ? COMPOSER_PLACEHOLDER : parts.after
+      for (const span of splitGraphemes(tail)) push(span.text, placeholder ? { dim: true } : {})
+      while (usedColumns < bandWidth) push(' ')
+
+      const middleBandRow = Math.floor(totalBandRows / 2)
+      if (bandRow === middleBandRow && deepseekWaveWordVisible(waveTick!, waveTier!, style)) {
+        const word = waveTier === 'unknown' ? 'Into the Unknown' : 'deepseek'
+        const start = Math.max(2, Math.floor((bandWidth - word.length) / 2))
+        const indices = Array.from({ length: word.length }, (_, at) => cellIndexAtColumn(cells, start + at))
+        if (indices.every(index => index !== undefined && (cells[index]!.char === ' ' || cells[index]!.dim === true))) {
+          for (let at = 0; at < word.length; at += 1) {
+            const cell = cells[indices[at]!]!
+            cell.char = word[at]!
+            cell.width = 1
+            cell.color = inkColor(deepseekWaveWordHue(at, hues))
+            cell.bold = true
+            cell.dim = false
+          }
+        }
+      }
+      if (bandRow === middleBandRow && (waveTier === 'deepseek' || waveTier === 'unknown') && style === 'wave') {
+        const spark = deepseekWaveSpark(waveTick!)
+        const lastIndex = cellIndexAtColumn(cells, bandWidth - 1)
+        if (spark !== null && lastIndex !== undefined && cells[lastIndex]!.char === ' ') {
+          cells[lastIndex]!.char = spark
+          cells[lastIndex]!.color = promptColor
+          cells[lastIndex]!.bold = true
+          cells[lastIndex]!.dim = false
+        }
+      }
+      return createElement(Text, { key: `editor-${sourceIndex}`, wrap: 'truncate-end' }, ...waveRowSpans(cells))
+    })
+    return createElement(
+      Box,
+      { flexDirection: 'column', width: bandWidth },
+      blankBandRow(0),
+      ...editorWaveRows,
+      blankBandRow(totalBandRows - 1),
+    )
+  }
 
-  return createElement(
-    Box,
-    { flexDirection: 'column' },
-    menu,
-    waveTick !== null && waveTier !== null && !busy ? waveRow() : band(staticEditor),
-  )
-}
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    menu,
+    waveTick !== null && waveTier !== null && waveStyle !== null && !busy && !preparingImages
+      ? waveRow()
+      : band(staticEditor),
+  )
+}
 
 /** One cached settled row: the row Box plus its roomy-prompt spacers. */
 interface SettledRowRecord {