dsh-code 1.0.1 → 1.0.3

package/src/app.ts

@@ -14,16 +14,16 @@
  * @module @deepseek-ai/dsh-code/app
  */
 
-import { basename } from 'node:path'
-import {
+import { basename } from 'node:path'
+import {
   createElement, memo, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement,
 } from 'react'
 import { Box, Static, Text, useInput, useStdin, useStdout, type Key } from 'ink'
-import type { CommandDescriptor } from '@deepseek-ai/dsh-commands'
-import type { ImageBlock } from '@deepseek-ai/dsh-llm'
-import type { TodoItem } from '@deepseek-ai/dsh-session'
-import type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
-import type { AuthorizationInteraction, AuthorizationStatus } from '@deepseek-ai/dsh-authorization'
+import type { CommandDescriptor } from '@deepseek-ai/dsh-commands'
+import type { ImageBlock } from '@deepseek-ai/dsh-llm'
+import type { TodoItem } from '@deepseek-ai/dsh-session'
+import type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
+import type { AuthorizationInteraction, AuthorizationStatus } from '@deepseek-ai/dsh-authorization'
 import {
   dim,
   getPalette,
@@ -41,7 +41,9 @@ import { settledEntryCount, type TranscriptEntry } from './render/projection.ts'
 import { type MdSegment, visibleColumns } from './render/markdown.ts'
 import {
   busyChaseFrame,
+  BUSY_CHASE_TICK_MS,
   caretVisible,
+  DEEP_DIVING_SHIMMER_TICK_MS,
   DEEPSEEK_WAVE_TICK_MS,
   deepseekWaveColumnBg,
   deepseekWaveDuration,
@@ -50,6 +52,8 @@ import {
   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'
@@ -76,19 +80,19 @@ import {
   type RecallState,
 } from './history.ts'
 import type { SessionDirectoryOptions, SessionRow } from './session-directory.ts'
-import type { GitDiffView } from './git-workflow.ts'
-import {
-  authorizationForProvider,
-  providerAuthorizationStatus,
-  type ProviderAuthorizationDirectory,
-  type ProviderAuthorizationRow,
-} from './authorization.ts'
-import { ProviderAuthorizationLogoutPanel, ProviderAuthorizationPanel } from './authorization-panel.ts'
-import {
-  looksLikeImagePath,
-  parsePastedImagePaths,
-  type ImagePathInspection,
-} from './attachments.ts'
+import type { GitDiffView } from './git-workflow.ts'
+import {
+  authorizationForProvider,
+  providerAuthorizationStatus,
+  type ProviderAuthorizationDirectory,
+  type ProviderAuthorizationRow,
+} from './authorization.ts'
+import { ProviderAuthorizationLogoutPanel, ProviderAuthorizationPanel } from './authorization-panel.ts'
+import {
+  looksLikeImagePath,
+  parsePastedImagePaths,
+  type ImagePathInspection,
+} from './attachments.ts'
 
 /** Match Codex's settled-resize window before rebuilding terminal scrollback. */
 const RESIZE_REFLOW_DELAY_MS = 75
@@ -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,
@@ -152,6 +165,7 @@ import {
   selectionWindow,
 } from './render/inspector.ts'
 import {
+  clampLiveAllocation,
   lineSegment,
   markdownLines,
   settledEntryLines,
@@ -171,52 +185,57 @@ import {
   deleteWordBackward,
   deleteWordForward,
   editorModel,
+  editorRowParts,
   insertText,
   type EditResult,
   killToLineEnd,
   killToLineStart,
-  lineBounds,
   moveCursorBy,
   moveCursorVertically,
+  moveToLineEnd,
+  moveToLineStart,
   moveWordLeft,
   moveWordRight,
+  remapStableRange,
+  replaceRangePreservingCursor,
   sanitizeDraftText,
   shouldRecallNavigate,
   splitGraphemes,
 } from './render/editor.ts'
 
-/** Visual priority for one bounded local notice. */
-export type NoticeTone = 'info' | 'warning' | 'error'
-
-/** One source of truth for TUI-owned slash commands in completion and `/help`. */
-const LOCAL_COMMANDS = [
-  { label: '/help', description: 'show this overlay' },
-  { label: '/model', description: 'switch the model and manage providers' },
-  { label: '/effort', description: 'adjust reasoning effort for the current model' },
-  { label: '/mode', description: 'inspect or select the agent preset (/mode [preset])' },
-  { label: '/permission', description: 'inspect or select the permission preset (/permission [preset])' },
-  { label: '/new', description: 'create and switch to a fresh session (/new [preset])' },
-  { label: '/fork', description: 'fork at the latest completed turn (/fork [event-seq])' },
-  { label: '/resume', description: 'browse or switch root sessions (/resume [id|prefix])' },
-  { label: '/plugin', description: 'inspect the live plugin composition' },
-  { label: '/jobs', description: 'inspect background jobs' },
-  { label: '/statusline', description: 'customize the status line items' },
-  { label: '/theme', description: 'switch the color theme' },
-  { label: '/history', description: 'search and recall past prompts' },
-  { label: '/agents', description: 'inspect subagent sessions of this conversation' },
-  { label: '/todos', description: 'inspect the full todo list' },
-  { label: '/subagent', description: 'choose the model delegated subagents run on' },
-  { label: '/delete', description: 'delete a session and its subagent threads' },
-  { label: '/clear', description: 'clear the screen' },
-  { label: '/export', description: 'export the transcript to markdown (/export [path])' },
-  { label: '/title', description: 'rename this session (/title <text>)' },
-  { label: '/copy', description: 'copy the latest assistant response' },
-  { label: '/diff', description: 'inspect Git changes (/diff [--staged|ref])' },
-  { label: '/review', description: 'review Git changes under read-only permissions' },
-  { label: '/quit', description: 'exit' },
-] as const
-
-const LOCAL_COMMAND_NAMES = new Set(LOCAL_COMMANDS.map(command => command.label.slice(1)))
+/** Visual priority for one bounded local notice. */
+export type NoticeTone = 'info' | 'warning' | 'error'
+
+/** One source of truth for TUI-owned slash commands in completion and `/help`. */
+const LOCAL_COMMANDS = [
+  { label: '/help', description: 'show this overlay' },
+  { label: '/model', description: 'switch the model and manage providers' },
+  { label: '/effort', description: 'adjust reasoning effort for the current model' },
+  { label: '/mode', description: 'inspect or select the agent preset (/mode [preset])' },
+  { label: '/permission', description: 'inspect or select the permission preset (/permission [preset])' },
+  { label: '/new', description: 'create and switch to a fresh session (/new [preset])' },
+  { label: '/fork', description: 'fork at the latest completed turn (/fork [event-seq])' },
+  { label: '/resume', description: 'browse or switch root sessions (/resume [id|prefix])' },
+  { label: '/plugin', description: 'inspect the live plugin composition' },
+  { label: '/jobs', description: 'inspect background jobs' },
+  { label: '/statusline', description: 'customize the status line items' },
+  { label: '/theme', description: 'switch the color theme' },
+  { label: '/history', description: 'search and recall past prompts' },
+  { label: '/agents', description: 'inspect subagent sessions of this conversation' },
+  { label: '/todos', description: 'inspect the full todo list' },
+  { label: '/subagent', description: 'choose the model delegated subagents run on' },
+  { label: '/vscode-keys', description: 'pass ctrl+r through the vs code terminal' },
+  { label: '/delete', description: 'delete a session and its subagent threads' },
+  { label: '/clear', description: 'clear the screen' },
+  { label: '/export', description: 'export the transcript to markdown (/export [path])' },
+  { label: '/title', description: 'rename this session (/title <text>)' },
+  { label: '/copy', description: 'copy the latest assistant response' },
+  { label: '/diff', description: 'inspect Git changes (/diff [--staged|ref])' },
+  { label: '/review', description: 'review Git changes under read-only permissions' },
+  { label: '/quit', description: 'exit' },
+] as const
+
+const LOCAL_COMMAND_NAMES = new Set(LOCAL_COMMANDS.map(command => command.label.slice(1)))
 
 /** Props the runner hands the app; callbacks stay owned by the runner. */
 export interface AppProps {
@@ -251,9 +270,9 @@ export interface AppProps {
   /** Permission preset selected for the current or pending first session. */
   permission: string
   /** Submit one line: slash commands to the registry, other text to the agent. */
-  dispatch(text: string, images?: readonly ImageBlock[]): void
-  /** Submit steering: consumed at the running turn's next step boundary. */
-  steer(text: string, images?: readonly ImageBlock[]): void
+  dispatch(text: string, images?: readonly ImageBlock[]): void
+  /** Submit steering: consumed at the running turn's next step boundary. */
+  steer(text: string, images?: readonly ImageBlock[]): void
   /** Interrupt the running turn (Esc); true when a turn was cancelled. */
   interrupt(): boolean
   /** Quit: unmount, flush, and request process exit. */
@@ -261,11 +280,11 @@ export interface AppProps {
   /** Load the selectable model directory (called when /model opens). */
   loadModels(): Promise<ModelDirectory>
   /** Load @mention candidates for the typed query (files + sessions). */
-  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
-  /** 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[]>
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  /** 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[], 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. */
@@ -286,21 +305,21 @@ export interface AppProps {
   unsetModelProviderCredential?(target: ProviderTargetView): Promise<void>
   /** Remove one user-owned provider profile and its page-managed credential. */
   removeModelProvider?(target: ProviderTargetView): Promise<void>
-  /** Save endpoint and explicit model capacities through the provider profile. */
-  saveModelProviderConfiguration?(target: ProviderTargetView, configuration: ProviderConfiguration): Promise<void>
-  /** Provider authorization flows and value-free stored-record facts. */
-  loadProviderAuthorizations?(): Promise<ProviderAuthorizationDirectory>
-  subscribeProviderAuthorizations?(listener: () => void): () => void
-  beginProviderAuthorization?(
-    row: ProviderAuthorizationRow,
-    method: string,
-    interaction: AuthorizationInteraction,
-    signal: AbortSignal,
-  ): Promise<AuthorizationStatus>
-  cancelProviderAuthorization?(row: ProviderAuthorizationRow): void
-  logoutProviderAuthorization?(row: ProviderAuthorizationRow): Promise<void>
-  openAuthorizationUrl?(url: string): boolean
-  copyTextValue?(text: string): Promise<void>
+  /** Save endpoint and explicit model capacities through the provider profile. */
+  saveModelProviderConfiguration?(target: ProviderTargetView, configuration: ProviderConfiguration): Promise<void>
+  /** Provider authorization flows and value-free stored-record facts. */
+  loadProviderAuthorizations?(): Promise<ProviderAuthorizationDirectory>
+  subscribeProviderAuthorizations?(listener: () => void): () => void
+  beginProviderAuthorization?(
+    row: ProviderAuthorizationRow,
+    method: string,
+    interaction: AuthorizationInteraction,
+    signal: AbortSignal,
+  ): Promise<AuthorizationStatus>
+  cancelProviderAuthorization?(row: ProviderAuthorizationRow): void
+  logoutProviderAuthorization?(row: ProviderAuthorizationRow): Promise<void>
+  openAuthorizationUrl?(url: string): boolean
+  copyTextValue?(text: string): Promise<void>
   /** Cycle to the next permission preset (Shift+Tab); returns the new label. */
   cyclePermission(): string
   /** Select or inspect a permission preset without requiring a pre-existing session. */
@@ -346,6 +365,8 @@ export interface AppProps {
   recordHistory(text: string): void
   /** Cancel one queued inbox message by identity (Delete on the empty composer). */
   cancelQueued(messageId: string): void
+  /** Apply the Ctrl+R terminal passthrough to the detected editor (/vscode-keys); resolves to a one-line summary. */
+  applyEditorKeys(): Promise<string>
 }
 
 /** Pad text with spaces to a visible-column target (menu name column). */
@@ -355,14 +376,15 @@ function padColumns(text: string, width: number): string {
 }
 
 /** Interval-driven frame counter for one self-contained animated leaf. */
-function useFrames(intervalMs: number): number {
+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,14 +403,9 @@ 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.
- */
+/** The original web StateDot chase used by the busy composer marker. */
 function BusyChase(): ReactElement {
-  const tick = useFrames(125)
+  const tick = useFrames(BUSY_CHASE_TICK_MS)
   return createElement(Text, { color: inkColor(getPalette().brandBright) }, busyChaseFrame(tick) + ' ')
 }
 
@@ -398,33 +415,65 @@ 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.
+ * One bounded line painted with the deep-diving shimmer: a continuously
+ * moving blue gradient across graphemes, the `✻` glyph in the breathing
+ * spark color. Shared by the busy line and the collapsed thinking marker;
+ * always exactly one row (truncate-end) so the live budget stays exact.
  */
-function DeepDivingLine({ since }: { since: number }): ReactElement {
-  useFrames(1000)
-  const elapsed = since === 0 ? 0 : Date.now() - since
+function ShimmerLine({ text }: { text: string }): ReactElement {
+  const tick = useFrames(DEEP_DIVING_SHIMMER_TICK_MS)
+  const palette = getPalette()
+  const graphemes = splitGraphemes(text)
   return createElement(
-    Box,
-    { flexDirection: 'row' },
-    createElement(BusyChase),
-    createElement(
-      Text,
-      { dimColor: true },
-      elapsed >= 15_000 ? `Deep diving... ${runClock(elapsed)}` : 'Deep diving...',
-    ),
+    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 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 elapsed = since === 0 ? 0 : Date.now() - since
+  const text = elapsed >= 15_000 ? `✻ Deep diving... ${runClock(elapsed)}` : '✻ Deep diving...'
+  return createElement(ShimmerLine, { text })
+}
+
 /**
  * The streaming buffer rendered with a hard size cap: the live region must
  * ALWAYS fit the terminal, or Ink's erase/rewrite of a dynamic tree taller
@@ -664,11 +713,12 @@ function todoMark(status: TodoItem['status']): string {
 
 /**
  * One-row live subagent summary (the Codex agent status feed, compressed to
- * the transcript's budget): running count, total, and the most recently
- * active child's current activity. One line, never more — the full view is
- * the /agents panel.
+ * the transcript's budget): running count, the observed total (the row cap
+ * is a display budget, not the fan-out size), and the most recently active
+ * child's current activity. One line, never more — the full view is the
+ * /agents panel.
  */
-function AgentsLine({ rows }: { rows: readonly SubagentRow[] }): ReactElement | undefined {
+function AgentsLine({ rows, total }: { rows: readonly SubagentRow[]; total: number }): ReactElement | undefined {
   if (rows.length === 0) return undefined
   const running = rows.filter(row => row.state !== 'done').length
   const newest = [...rows].sort((left, right) => right.updatedAt - left.updatedAt)[0]!
@@ -680,7 +730,7 @@ function AgentsLine({ rows }: { rows: readonly SubagentRow[] }): ReactElement |
       Text,
       { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' },
       `agents ${running} live`,
-      createElement(Text, { color: inkColor(getPalette().dim) }, ` · ${rows.length} total · /agents`),
+      createElement(Text, { color: inkColor(getPalette().dim) }, ` · ${total} total · /agents`),
       createElement(Text, { color: inkColor(getPalette().text) }, ` · ${mark} ${newest.label} ${newest.activity}`),
     ),
   )
@@ -1488,10 +1538,10 @@ function ModelPanel({ directory, error, current, onSelect, onProviders, onRetry,
     createElement(Text, { color: inkColor(getPalette().brand), bold: true, wrap: 'truncate-end' }, truncateColumns(`/model — select model${rows.length === 0 ? '' : ` · ${cursor + 1}/${rows.length}`}`, viewport.contentColumns)),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
     ...visibleStateRows,
-    ...visible.map((row) => {
-      const index = rows.indexOf(row)
-      const capability = row.inputModalities?.includes('image') === true ? ' · image' : ''
-      const label = displayText(`${row.providerName} · ${row.modelName}${capability}`)
+    ...visible.map((row) => {
+      const index = rows.indexOf(row)
+      const capability = row.inputModalities?.includes('image') === true ? ' · image' : ''
+      const label = displayText(`${row.providerName} · ${row.modelName}${capability}`)
       return createElement(
         Text,
         {
@@ -1521,17 +1571,17 @@ function providerStateLabel(row: ProviderTargetView): string {
 }
 
 /** The provider-management stage reached from /model with `a`. */
-function ProviderPanel({ directory, error, authorizations, authorizationError, onCredential, onConfigure, onUnset, onRemove, onLogin, onLogout, onRetry, onBack }: {
-  directory: ProviderSettingsDirectory | undefined
-  error: string | undefined
-  authorizations: ProviderAuthorizationDirectory | undefined
-  authorizationError: string | undefined
-  onCredential(target: ProviderTargetView): void
-  onConfigure(target: ProviderTargetView): void
-  onUnset(target: ProviderTargetView): void
-  onRemove(target: ProviderTargetView): void
-  onLogin(target: ProviderTargetView, authorization: ProviderAuthorizationRow): void
-  onLogout(target: ProviderTargetView, authorization: ProviderAuthorizationRow): void
+function ProviderPanel({ directory, error, authorizations, authorizationError, onCredential, onConfigure, onUnset, onRemove, onLogin, onLogout, onRetry, onBack }: {
+  directory: ProviderSettingsDirectory | undefined
+  error: string | undefined
+  authorizations: ProviderAuthorizationDirectory | undefined
+  authorizationError: string | undefined
+  onCredential(target: ProviderTargetView): void
+  onConfigure(target: ProviderTargetView): void
+  onUnset(target: ProviderTargetView): void
+  onRemove(target: ProviderTargetView): void
+  onLogin(target: ProviderTargetView, authorization: ProviderAuthorizationRow): void
+  onLogout(target: ProviderTargetView, authorization: ProviderAuthorizationRow): void
   onRetry(): void
   onBack(): void
 }): ReactElement {
@@ -1598,27 +1648,27 @@ function ProviderPanel({ directory, error, authorizations, authorizationError, o
       }
       return
     }
-    if (input === 'x') {
+    if (input === 'x') {
       if (!target.removable) {
         setActionError('this provider profile is not removable')
       } else {
         onRemove(target)
       }
-      return
-    }
-    const authorization = authorizationForProvider(authorizations, target.provider)
-    if (input === 'l' || input === 'L') {
-      if (authorization === undefined) setActionError('this provider offers no interactive login flow')
-      else if (authorization.inFlight) setActionError('a login attempt is already running for this provider')
-      else onLogin(target, authorization)
-      return
-    }
-    if (input === 'o' || input === 'O') {
-      if (authorization === undefined || !authorization.record.configured) setActionError('this provider has no login record to remove')
-      else if (!authorization.record.writable) setActionError('this login record is read-only')
-      else onLogout(target, authorization)
-      return
-    }
+      return
+    }
+    const authorization = authorizationForProvider(authorizations, target.provider)
+    if (input === 'l' || input === 'L') {
+      if (authorization === undefined) setActionError('this provider offers no interactive login flow')
+      else if (authorization.inFlight) setActionError('a login attempt is already running for this provider')
+      else onLogin(target, authorization)
+      return
+    }
+    if (input === 'o' || input === 'O') {
+      if (authorization === undefined || !authorization.record.configured) setActionError('this provider has no login record to remove')
+      else if (!authorization.record.writable) setActionError('this login record is read-only')
+      else onLogout(target, authorization)
+      return
+    }
     if (key.return) {
       if (target.settingsNs.length === 0) {
         setActionError('this provider is not managed by Harness settings')
@@ -1646,19 +1696,19 @@ function ProviderPanel({ directory, error, authorizations, authorizationError, o
         ...(actionError === undefined
           ? []
           : [createElement(Text, { key: 'action-error', color: inkColor(getPalette().error), wrap: 'truncate-end' }, truncateColumns(`  ${actionError}`, viewport.contentColumns))]),
-        ...(directory?.failures ?? []).map((failure, index) => createElement(
+        ...(directory?.failures ?? []).map((failure, index) => createElement(
           Text,
           { key: `failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
-          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
-        )),
-        ...(authorizationError === undefined
-          ? []
-          : [createElement(Text, { key: 'authorization-error', color: inkColor(getPalette().warn), wrap: 'truncate-end' }, truncateColumns(`  login status unavailable: ${singleLineText(authorizationError)}`, viewport.contentColumns))]),
-        ...(authorizations?.failures ?? []).map((failure, index) => createElement(
-          Text,
-          { key: `authorization-failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
-          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
-        )),
+          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
+        )),
+        ...(authorizationError === undefined
+          ? []
+          : [createElement(Text, { key: 'authorization-error', color: inkColor(getPalette().warn), wrap: 'truncate-end' }, truncateColumns(`  login status unavailable: ${singleLineText(authorizationError)}`, viewport.contentColumns))]),
+        ...(authorizations?.failures ?? []).map((failure, index) => createElement(
+          Text,
+          { key: `authorization-failure-${index}`, color: inkColor(getPalette().warn), wrap: 'truncate-end' },
+          truncateColumns(`  ${singleLineText(failure)}`, viewport.contentColumns),
+        )),
         ...(rows.length === 0
           ? [createElement(Text, { key: 'empty', color: inkColor(getPalette().dim), wrap: 'truncate-end' }, '  no configurable providers')]
           : []),
@@ -1674,13 +1724,13 @@ function ProviderPanel({ directory, error, authorizations, authorizationError, o
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
     ...visibleStateRows,
     ...visible.map((row) => {
-      const index = rows.indexOf(row)
-      const identity = row.displayName === row.provider ? row.provider : `${row.displayName} (${row.provider})`
-      const authorization = authorizationForProvider(authorizations, row.provider)
-      const manualKeyConfigured = row.credential?.kind === 'facts' && row.credential.configured
-      const showAuthorization = !manualKeyConfigured || authorization?.record.configured === true || authorization?.inFlight === true
-      const authLabel = showAuthorization ? ` · ${providerAuthorizationStatus(authorization)}` : ''
-      const label = `${identity} · ${providerStateLabel(row)}${authLabel}${row.removable ? ' · custom' : ''}`
+      const index = rows.indexOf(row)
+      const identity = row.displayName === row.provider ? row.provider : `${row.displayName} (${row.provider})`
+      const authorization = authorizationForProvider(authorizations, row.provider)
+      const manualKeyConfigured = row.credential?.kind === 'facts' && row.credential.configured
+      const showAuthorization = !manualKeyConfigured || authorization?.record.configured === true || authorization?.inFlight === true
+      const authLabel = showAuthorization ? ` · ${providerAuthorizationStatus(authorization)}` : ''
+      const label = `${identity} · ${providerStateLabel(row)}${authLabel}${row.removable ? ' · custom' : ''}`
       return createElement(
         Text,
         { key: row.provider, color: index === cursor ? inkColor(getPalette().brandBright) : inkColor(getPalette().dim), wrap: 'truncate-end' },
@@ -1688,7 +1738,7 @@ function ProviderPanel({ directory, error, authorizations, authorizationError, o
       )
     }),
     createElement(PanelGap, { visible: viewport.gapRows > 0 }),
-    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑↓ move · enter key · l login · o logout · tab configure · d remove key · x remove provider · r retry · esc back', viewport.contentColumns)),
+    createElement(Text, { color: inkColor(getPalette().dim), wrap: 'truncate-end' }, truncateColumns('↑↓ move · enter key · l login · o logout · tab configure · d remove key · x remove provider · r retry · esc back', viewport.contentColumns)),
   )
 }
 
@@ -1969,7 +2019,7 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
     createElement(Text, { key: 'keys-title', bold: true, wrap: 'truncate-end' }, ' keys'),
     createElement(Text, { key: 'key-submit', dimColor: true, wrap: 'truncate-end' }, '  enter submit · up/down history · tab complete'),
     createElement(Text, { key: 'key-mentions', dimColor: true, wrap: 'truncate-end' }, '  @ mentions workspace files and sessions'),
-    createElement(Text, { key: 'key-inspector', dimColor: true, wrap: 'truncate-end' }, '  ctrl+o history details · ctrl+r thinking · shift+tab permission preset'),
+    createElement(Text, { key: 'key-inspector', dimColor: true, wrap: 'truncate-end' }, '  ctrl+o history details · ctrl/alt+r thinking · shift+tab permission preset'),
     createElement(Text, { key: 'key-cancel', dimColor: true, wrap: 'truncate-end' }, '  esc interrupt the running turn · ctrl+c cancel / clear / quit · ctrl+d exit'),
     createElement(Text, { key: 'key-queue', dimColor: true, wrap: 'truncate-end' }, '  delete on the empty composer cancels the newest queued message'),
     createElement(Text, { key: 'key-edit', dimColor: true, wrap: 'truncate-end' }, '  ctrl+k cut to end of line · ctrl+u clear line · ctrl+a / ctrl+e line ends'),
@@ -1982,12 +2032,12 @@ function HelpPanel({ descriptors, skills, commandError, skillError, onClose }: {
         { key: 'commands-error', color: inkColor(getPalette().error), wrap: 'truncate-end' },
         truncateColumns(`  command catalog unavailable: ${singleLineText(commandError)}`, viewport.contentColumns),
       )]),
-    ...LOCAL_COMMANDS.map(command => createElement(
-      Box,
-      { key: `local-${command.label.slice(1)}` },
-      row(command.label, command.description),
-    )),
-    ...descriptors.filter(descriptor => !LOCAL_COMMAND_NAMES.has(descriptor.name)).map(descriptor => createElement(
+    ...LOCAL_COMMANDS.map(command => createElement(
+      Box,
+      { key: `local-${command.label.slice(1)}` },
+      row(command.label, command.description),
+    )),
+    ...descriptors.filter(descriptor => !LOCAL_COMMAND_NAMES.has(descriptor.name)).map(descriptor => createElement(
       Text,
       { key: `command-${descriptor.name}`, dimColor: true, wrap: 'truncate-end' },
       `  ${padColumns(`/${descriptor.name}`, nameWidth)}${dim(truncateColumns(displayText(descriptor.description), descBudget))}`,
@@ -2054,83 +2104,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'
 
 /** One physical cell of the wave-painted composer row: a char plus styles. */
 interface ComposerCell {
   char: string
+  width?: number
   color?: string
   backgroundColor?: string
   bold?: boolean
@@ -2360,12 +2340,12 @@ export function completionCandidates(
 ): readonly CompletionCandidate[] {
   if (!value.startsWith('/')) return []
   const prefix = value.slice(1).split(' ')[0] ?? ''
-  const local: CompletionCandidate[] = LOCAL_COMMANDS.map(command => ({ ...command, origin: 'command' }))
+  const local: CompletionCandidate[] = LOCAL_COMMANDS.map(command => ({ ...command, origin: 'command' }))
   // Local commands shadow registry names (e.g. the TUI-local /permission works
   // before any session exists, while the registry child needs one), so
   // collisions cannot render two rows with the same key.
-  const registry = descriptors
-    .filter(descriptor => !LOCAL_COMMAND_NAMES.has(descriptor.name))
+  const registry = descriptors
+    .filter(descriptor => !LOCAL_COMMAND_NAMES.has(descriptor.name))
     .map((descriptor): CompletionCandidate => ({
       label: `/${descriptor.name}`,
       description: descriptor.description,
@@ -2455,25 +2435,25 @@ function CompletionMenu({ active, mention, index, rows }: {
   )
 }
 
-interface DraftImage extends ImagePathInspection {
-  /** Visible draft token; deleting it also detaches the hidden path. */
-  readonly marker: string
-}
-
-/**
- * The prompt box: TUI-local slash commands handled locally, other lines
+interface DraftImage extends ImagePathInspection {
+  /** Visible draft token; deleting it also detaches the hidden path. */
+  readonly marker: string
+}
+
+/**
+ * The prompt box: TUI-local slash commands handled locally, other lines
  * dispatched; input editing keeps a cursor with history and completion.
  * While a modal (approval / question / model panel) owns the keys, the
  * box passes every key through untouched.
  */
-function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openPermission, openResume, openPlugin, openJobs, openStatusline, openTheme, openHistory, openAgents, openSubagent, openTodos, openDelete, openDiff, reviewChanges, deleteConfirm, confirmDelete, cancelDelete, createSession, forkSession, cancelSessionSwitch, notify, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, inspectImages, prepareImages, cyclePermission, exportTranscript, renameTitle, copyLastResponse, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle, maxRows, onEditorRows }: {
+function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, openEffort, openHelp, openMode, openPermission, openResume, openPlugin, openJobs, openStatusline, openTheme, openHistory, openAgents, openSubagent, openTodos, openDelete, openDiff, reviewChanges, deleteConfirm, confirmDelete, cancelDelete, createSession, forkSession, cancelSessionSwitch, notify, applyEditorKeys, hasNotice, dismissNotice, toggleReasoning, openVerbose, clearView, refresh, loadMentions, inspectImages, prepareImages, cyclePermission, exportTranscript, renameTitle, copyLastResponse, recallSpace, recordLocal, recordHistory, queued, cancelQueued, historyFill, historyConsumed, waveTier, waveStyle, maxRows, onEditorRows }: {
   active: boolean
   frozen: boolean
   busy: boolean
   descriptors: readonly CommandDescriptor[]
   skills: readonly SkillRow[]
-  dispatch(text: string, images?: readonly ImageBlock[]): void
-  steer(text: string, images?: readonly ImageBlock[]): void
+  dispatch(text: string, images?: readonly ImageBlock[]): void
+  steer(text: string, images?: readonly ImageBlock[]): void
   interrupt(): boolean
   quit(): void
   openModel(): void
@@ -2507,15 +2487,17 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   forkSession(argument: string): void
   cancelSessionSwitch(): boolean
   notify(text: string, tone?: NoticeTone): void
+  /** Apply the Ctrl+R passthrough to the detected editor (/vscode-keys); resolves to a one-line summary. */
+  applyEditorKeys(): Promise<string>
   hasNotice: boolean
   dismissNotice(): void
   toggleReasoning(): void
   openVerbose(): void
   clearView(): void
   refresh(): void
-  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
-  inspectImages(paths: readonly string[]): Promise<readonly ImagePathInspection[]>
-  prepareImages(paths: readonly string[]): Promise<readonly ImageBlock[]>
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  inspectImages(paths: readonly string[]): Promise<readonly ImagePathInspection[]>
+  prepareImages(paths: readonly string[], signal?: AbortSignal): Promise<readonly ImageBlock[]>
   cyclePermission(): string
   exportTranscript(argument: string): Promise<void>
   renameTitle(argument: string): string
@@ -2548,17 +2530,26 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   onEditorRows(rows: number): void
 }): ReactElement {
   const columns = useStdout().stdout?.columns ?? 80
-  const stdin = useStdin().stdin
-  const [value, setValue] = useState('')
-  const [cursor, setCursor] = useState(0)
-  const valueRef = useRef(value)
-  const cursorRef = useRef(cursor)
-  valueRef.current = value
-  cursorRef.current = cursor
-  const [draftImages, setDraftImages] = useState<readonly DraftImage[]>([])
-  const draftImagesRef = useRef(draftImages)
-  draftImagesRef.current = draftImages
-  const [preparingImages, setPreparingImages] = useState(false)
+  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)
+  const cursorRef = useRef(cursor)
+  valueRef.current = value
+  cursorRef.current = cursor
+  const [draftImages, setDraftImages] = useState<readonly DraftImage[]>([])
+  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,21 +2560,30 @@ 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([], ''))
 
+  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.
-  useEffect(() => {
-    if (historyFill === undefined) return
-    const safe = sanitizeDraftText(historyFill.text)
-    draftImagesRef.current = []
-    setDraftImages([])
+  useEffect(() => {
+    if (historyFill === undefined) return
+    const safe = sanitizeDraftText(historyFill.text)
+    draftImagesRef.current = []
+    setDraftImages([])
+    valueRef.current = safe
+    cursorRef.current = safe.length
     setValue(safe)
     setCursor(safe.length)
+    resetCursorBlink()
     preferredColumnRef.current = null
     setDismissedMenuValue(undefined)
     recall.current = {
@@ -2593,25 +2593,24 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       lastRecalled: safe,
     }
     historyConsumed()
-  }, [historyFill, recallSpace, historyConsumed])
-
-  useEffect(() => {
-    setDraftImages((current) => {
-      const next = current.filter(image => value.includes(image.marker))
-      draftImagesRef.current = next
-      return next.length === current.length ? current : next
-    })
-  }, [value])
+  }, [historyFill, recallSpace, historyConsumed, resetCursorBlink])
+
+  useEffect(() => {
+    setDraftImages((current) => {
+      const next = current.filter(image => value.includes(image.marker))
+      draftImagesRef.current = next
+      return next.length === current.length ? current : next
+    })
+  }, [value])
 
   // Home/End and the Backspace-vs-Delete family never survive Ink's parser
   // 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.
+  // 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)
@@ -2619,14 +2618,19 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
       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 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
@@ -2649,80 +2653,99 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   const mentionToken = tokenMatch === null
     ? undefined
     : { 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 sameImagePath = (left: string, right: string): boolean => (
-    process.platform === 'win32' ? left.toLowerCase() === right.toLowerCase() : left === right
-  )
-
-  const uniqueImageMarker = (name: string, source: 'mention' | 'drop', reserved: readonly string[] = []): string => {
-    const safeName = singleLineText(sanitizeDraftText(name))
-    const base = source === 'mention' ? `@${safeName}` : `[image: ${safeName}]`
-    let marker = base
-    let suffix = 2
-    while (valueRef.current.includes(marker) || draftImagesRef.current.some(image => image.marker === marker) || reserved.includes(marker)) {
-      marker = source === 'mention' ? `@${safeName} (${suffix})` : `[image: ${safeName} ${suffix}]`
-      suffix += 1
-    }
-    return marker
-  }
-
-  const registerDraftImage = (inspection: ImagePathInspection, marker: string): boolean => {
-    if (draftImagesRef.current.some(image => sameImagePath(image.path, inspection.path))) {
-      notify(`${inspection.name} is already attached`, 'warning')
-      return false
-    }
-    const next = [...draftImagesRef.current, { ...inspection, marker }]
-    draftImagesRef.current = next
-    setDraftImages(next)
-    return true
-  }
-
-  const insertDroppedImages = (paths: readonly string[]): void => {
-    notify(`checking ${paths.length} image${paths.length === 1 ? '' : 's'}…`)
-    void inspectImages(paths).then((inspected) => {
-      const additions: DraftImage[] = []
-      const markers: string[] = []
-      for (const inspection of inspected) {
-        if ([...draftImagesRef.current, ...additions].some(image => sameImagePath(image.path, inspection.path))) continue
-        const marker = uniqueImageMarker(inspection.name, 'drop', markers)
-        additions.push({ ...inspection, marker })
-        markers.push(marker)
-      }
-      if (additions.length === 0) {
-        notify('those images are already attached', 'warning')
-        return
-      }
-      const at = cursorRef.current
-      const current = valueRef.current
-      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 nextImages = [...draftImagesRef.current, ...additions]
-      draftImagesRef.current = nextImages
-      setDraftImages(nextImages)
-      notify(`${additions.length} image${additions.length === 1 ? '' : 's'} ready for the next message`)
-    }, (reason: unknown) => {
-      notify(`image attachment failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
-    })
-  }
+  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
+  )
+
+  const uniqueImageMarker = (name: string, source: 'mention' | 'drop', reserved: readonly string[] = []): string => {
+    const safeName = singleLineText(sanitizeDraftText(name))
+    const base = source === 'mention' ? `@${safeName}` : `[image: ${safeName}]`
+    let marker = base
+    let suffix = 2
+    while (valueRef.current.includes(marker) || draftImagesRef.current.some(image => image.marker === marker) || reserved.includes(marker)) {
+      marker = source === 'mention' ? `@${safeName} (${suffix})` : `[image: ${safeName} ${suffix}]`
+      suffix += 1
+    }
+    return marker
+  }
+
+  const registerDraftImage = (inspection: ImagePathInspection, marker: string): boolean => {
+    if (draftImagesRef.current.some(image => sameImagePath(image.path, inspection.path))) {
+      notify(`${inspection.name} is already attached`, 'warning')
+      return false
+    }
+    const next = [...draftImagesRef.current, { ...inspection, marker }]
+    draftImagesRef.current = next
+    setDraftImages(next)
+    return true
+  }
+
+  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[] = []
+      const markers: string[] = []
+      for (const inspection of inspected) {
+        if ([...draftImagesRef.current, ...additions].some(image => sameImagePath(image.path, inspection.path))) continue
+        const marker = uniqueImageMarker(inspection.name, 'drop', markers)
+        additions.push({ ...inspection, marker })
+        markers.push(marker)
+      }
+      if (additions.length === 0) {
+        notify('those images are already attached', 'warning')
+        return
+      }
+      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 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)
+      notify(`${additions.length} image${additions.length === 1 ? '' : 's'} ready for the next message`)
+    }, (reason: unknown) => {
+      notify(`image attachment failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+    })
+  }
 
   useEffect(() => {
+    const requestId = mentionRequestRef.current + 1
+    mentionRequestRef.current = requestId
     if (!active || !mentionActive) {
       setMentionRows([])
       return
     }
     const controller = new AbortController()
-    setMentionRows([])
-    loadMentions(mentionToken.query, controller.signal).then(
-      rows => setMentionRows(rows),
-      () => {},
-    )
+    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])
@@ -2730,9 +2753,12 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   // 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 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
-    ? mentionRows.map(row => ({
+    ? visibleMentionRows.map(row => ({
       label: row.label.startsWith('@')
         ? row.label
         : `@${row.label}${row.kind === 'directory' ? '/' : ''}`,
@@ -2744,56 +2770,75 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   /** Accept the highlighted completion-menu candidate into the draft. */
   const acceptMenuCandidate = (): void => {
     if (mentionActive && mentionToken !== undefined) {
-      const row = mentionRows[completionIndex % mentionRows.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
-          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
-            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)
-              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)
-            registerDraftImage(inspection, marker)
-            notify(`${inspection.name} ready for the next message`)
-          }, (reason: unknown) => {
-            notify(`image attachment failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
-          })
-          setCompletionIndex(0)
-          setDismissedMenuValue(undefined)
-          return
-        }
-        // Session rows carry the canonical @[label](dsh-session:…) token;
+      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
+            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 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 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) => {
+            notify(`image attachment failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
+          })
+          setCompletionIndex(0)
+          setDismissedMenuValue(undefined)
+          return
+        }
+        // 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)
+        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) {
-        setValue(`${candidate.label} `)
-        setCursor(candidate.label.length + 1)
+        const nextValue = `${candidate.label} `
+        const nextCursor = candidate.label.length + 1
+        valueRef.current = nextValue
+        cursorRef.current = nextCursor
+        setValue(nextValue)
+        setCursor(nextCursor)
+        resetCursorBlink()
       }
     }
     setCompletionIndex(0)
@@ -2803,8 +2848,11 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
   /** 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
+    valueRef.current = edit.value
+    cursorRef.current = edit.cursor
     setValue(edit.value)
     setCursor(edit.cursor)
+    resetCursorBlink()
     preferredColumnRef.current = null
     setCompletionIndex(0)
     setDismissedMenuValue(undefined)
@@ -2812,15 +2860,106 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
 
   /** Move the cursor without editing; horizontal moves clear the column preference. */
   const moveCursorTo = (next: number): void => {
-    if (next === cursor) return
+    resetCursorBlink()
+    if (next === cursorRef.current) return
+    cursorRef.current = next
     setCursor(next)
     preferredColumnRef.current = null
   }
 
-  useInput((input, key) => {
-    // Modal ownership: approval/question/model dialogs consume all keys.
-    if (!active) return
-    if (preparingImages) return
+  /** 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
+    // 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.
@@ -2843,7 +2982,10 @@ 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') {
+    // Alt+R is the zero-config alias: VS Code never intercepts Alt chords,
+    // so the toggle stays reachable before /vscode-keys has been applied.
+    if ((key.ctrl || key.meta) && input === 'r') {
+      if (focusReporting && !terminalFocusedRef.current) return
       toggleReasoning()
       return
     }
@@ -2860,11 +3002,14 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     if (key.ctrl && input === 'c') {
       if (busy) {
         interrupt()
-      } else if (value !== '') {
-        setValue('')
-        setCursor(0)
-        draftImagesRef.current = []
-        setDraftImages([])
+      } else if (liveValue !== '') {
+        valueRef.current = ''
+        cursorRef.current = 0
+        setValue('')
+        setCursor(0)
+        resetCursorBlink()
+        draftImagesRef.current = []
+        setDraftImages([])
         setCompletionIndex(0)
         setDismissedMenuValue(undefined)
       } else {
@@ -2875,8 +3020,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 +3030,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 +3042,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,43 +3058,54 @@ 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()
-      if (draftImagesRef.current.length > 0) {
-        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) => {
-          setPreparingImages(false)
-          valueRef.current = ''
-          cursorRef.current = 0
-          setValue('')
-          setCursor(0)
-          draftImagesRef.current = []
-          setDraftImages([])
-          setCompletionIndex(0)
-          setDismissedMenuValue(undefined)
-          dismissNotice()
-          if (text !== '') {
-            recordLocal(text)
-            recordHistory(text)
-          }
-          recall.current = beginRecall(recallSpace, '')
-          if (busy) steer(text, images)
-          else dispatch(text, images)
-        }, (reason: unknown) => {
-          setPreparingImages(false)
-          notify(`image submission failed: ${reason instanceof Error ? reason.message : String(reason)}`, 'error')
-        })
-        return
-      }
-      setValue('')
+      }
+      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), controller.signal).then((images) => {
+          if (controller.signal.aborted || prepareEpochRef.current !== epoch) return
+          prepareAbortRef.current = undefined
+          setPreparingImages(false)
+          valueRef.current = ''
+          cursorRef.current = 0
+          setValue('')
+          setCursor(0)
+          draftImagesRef.current = []
+          setDraftImages([])
+          setCompletionIndex(0)
+          setDismissedMenuValue(undefined)
+          dismissNotice()
+          if (text !== '') {
+            recordLocal(text)
+            recordHistory(text)
+          }
+          recall.current = beginRecall(recallSpace, '')
+          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)
+      resetCursorBlink()
       setCompletionIndex(0)
       setDismissedMenuValue(undefined)
       if (text === '') return
@@ -3076,6 +3232,13 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         openTodos()
         return
       }
+      if (text === '/vscode-keys' || text.startsWith('/vscode-keys ')) {
+        void applyEditorKeys().then(
+          summary => notify(summary),
+          error => notify(`vscode-keys failed: ${error instanceof Error ? error.message : String(error)}`, 'error'),
+        )
+        return
+      }
       if (text === '/subagent') {
         openSubagent()
         return
@@ -3097,6 +3260,15 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     // 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 +3277,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))
+    // 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) {
-      // 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
-      }
+      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()
+      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(value, cursor) : moveCursorBy(value, cursor, -1))
+      moveCursorTo(key.meta || key.ctrl ? moveWordLeft(liveValue, liveCursor) : moveCursorBy(liveValue, liveCursor, -1))
       return
     }
     if (key.rightArrow) {
-      moveCursorTo(key.meta || key.ctrl ? moveWordRight(value, cursor) : moveCursorBy(value, cursor, 1))
+      moveCursorTo(key.meta || key.ctrl ? moveWordRight(liveValue, liveCursor) : moveCursorBy(liveValue, liveCursor, 1))
       return
     }
     if (key.meta && input === 'b') {
-      moveCursorTo(moveWordLeft(value, cursor))
+      moveCursorTo(moveWordLeft(liveValue, liveCursor))
       return
     }
     if (key.meta && input === 'f') {
-      moveCursorTo(moveWordRight(value, cursor))
+      moveCursorTo(moveWordRight(liveValue, liveCursor))
       return
     }
     if (key.ctrl && input === 'b') {
-      moveCursorTo(moveCursorBy(value, cursor, -1))
+      moveCursorTo(moveCursorBy(liveValue, liveCursor, -1))
       return
     }
     if (key.ctrl && input === 'f') {
-      moveCursorTo(moveCursorBy(value, cursor, 1))
+      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))
+      applyEdit(deleteWordBackward(liveValue, liveCursor))
       return
     }
     if (key.meta && input === 'd') {
-      applyEdit(deleteWordForward(value, cursor))
+      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))
+      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)
+      moveCursorTo(moveToLineStart(liveValue, liveCursor, true))
       return
     }
     if (key.ctrl && input === 'e') {
-      moveCursorTo(lineBounds(value, cursor).end)
+      moveCursorTo(moveToLineEnd(liveValue, liveCursor, true))
       return
     }
     if (key.ctrl && input === 'u') {
-      applyEdit(killToLineStart(value, cursor))
+      applyEdit(killToLineStart(liveValue, liveCursor))
       return
     }
     if (key.ctrl && input === 'k') {
-      applyEdit(killToLineEnd(value, cursor))
+      applyEdit(killToLineEnd(liveValue, liveCursor))
       return
     }
     if (key.ctrl && input === 'y') {
-      if (killRef.current !== '') applyEdit(insertText(value, cursor, killRef.current))
+      if (killRef.current !== '') applyEdit(insertText(liveValue, liveCursor, killRef.current))
       return
     }
     // Ctrl+L refreshes the screen (readline convention): raw ANSI clear
@@ -3268,16 +3391,16 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
         pasteBracketRef.current = false
         pasteBracketCancelRef.current?.()
         text = text.replaceAll(PASTE_END_MARKER, '')
-      }
-      if (text === '') return
-      const droppedPaths = text.length > 1 ? parsePastedImagePaths(text) : []
-      if (droppedPaths.length > 0) {
-        insertDroppedImages(droppedPaths)
-        return
-      }
-      applyEdit(insertText(value, cursor, text))
+      }
+      if (text === '') return
+      const droppedPaths = text.length > 1 ? parsePastedImagePaths(text) : []
+      if (droppedPaths.length > 0) {
+        insertDroppedImages(droppedPaths)
+        return
+      }
+      applyEdit(insertText(valueRef.current, cursorRef.current, text))
     }
-  })
+  }, 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
@@ -3299,7 +3422,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,7 +3448,6 @@ 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 clampedCursor = clampCursor(value, cursor)
   const caret = caretSite(editorViewModel, clampedCursor)
@@ -3390,131 +3512,126 @@ 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.
+  // 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 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)
+    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
-        ? busy
-          ? createElement(BusyChase)
-          : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `)
+        ? preparingImages
+          ? createElement(Text, { color: inkColor(getPalette().warn), bold: true }, '… ')
+          : busy
+            ? createElement(BusyChase)
+            : createElement(Text, { color: promptColor, bold: tierActive ? true : undefined }, `${promptGlyph} `)
         : '  ',
-      before,
-      createElement(CursorBlock, { key: 'caret', char: caretChar }),
+      parts.before,
+      parts.hasCaret
+        ? createElement(Text, { key: 'caret', inverse: cursorVisible || undefined }, parts.caret)
+        : null,
       placeholder
         ? createElement(Text, { dimColor: true }, COMPOSER_PLACEHOLDER)
-        : after,
+        : 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.
+  // 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, 3)
+      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[] = []
-      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) })
+      for (let column = 0; column < bandWidth; column += 1) {
+        blanks.push({ char: ' ', width: 1, backgroundColor: waveBg(row, column) })
       }
-    } else {
-      for (const char of waveEditor.after) {
-        cells.push({ char, backgroundColor: waveBg(1, cells.length) })
+      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
     }
-    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 }
+    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(' ')
       }
-      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
+      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
+          }
         }
       }
-    }
-    // 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
+      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),
-      createElement(Text, { wrap: 'truncate-end' }, ...waveRowSpans(cells)),
-      blankBandRow(2),
+      ...editorWaveRows,
+      blankBandRow(totalBandRows - 1),
     )
   }
 
@@ -3522,7 +3639,9 @@ function Input({ active, frozen, busy, descriptors, skills, dispatch, steer, int
     Box,
     { flexDirection: 'column' },
     menu,
-    waveTick !== null && waveTier !== null && !busy ? waveRow() : band(staticEditor),
+    waveTick !== null && waveTier !== null && waveStyle !== null && !busy && !preparingImages
+      ? waveRow()
+      : band(staticEditor),
   )
 }
 
@@ -3764,13 +3883,13 @@ export function App(props: AppProps): ReactElement {
   const skills = useSyncExternalStore(props.skills.subscribe, readSkills)
   const [modelLabel, setModelLabel] = useState(props.model)
   const [modelOpen, setModelOpen] = useState(false)
-  /** Nested /model stages; only one owns terminal input at a time. */
-  const [providerOpen, setProviderOpen] = useState(false)
-  const [providerAction, setProviderAction] = useState<
-    | { kind: 'credential' | 'configure' | 'unset' | 'remove'; target: ProviderTargetView }
-    | { kind: 'login' | 'logout'; target: ProviderTargetView; authorization: ProviderAuthorizationRow }
-    | undefined
-  >(undefined)
+  /** Nested /model stages; only one owns terminal input at a time. */
+  const [providerOpen, setProviderOpen] = useState(false)
+  const [providerAction, setProviderAction] = useState<
+    | { kind: 'credential' | 'configure' | 'unset' | 'remove'; target: ProviderTargetView }
+    | { kind: 'login' | 'logout'; target: ProviderTargetView; authorization: ProviderAuthorizationRow }
+    | undefined
+  >(undefined)
   /** The model row whose effort levels the /model stage lists; undefined shows the model list. */
   const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
   /** Effective reasoning effort, shown in the /model picker and switch notice. */
@@ -3820,10 +3939,10 @@ export function App(props: AppProps): ReactElement {
   }, [modelLabel, effortLabel])
   const [directory, setDirectory] = useState<ModelDirectory | undefined>(undefined)
   const [modelError, setModelError] = useState<string | undefined>(undefined)
-  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
-  const [providerError, setProviderError] = useState<string | undefined>(undefined)
-  const [authorizationDirectory, setAuthorizationDirectory] = useState<ProviderAuthorizationDirectory | undefined>(undefined)
-  const [authorizationError, setAuthorizationError] = useState<string | undefined>(undefined)
+  const [providerDirectory, setProviderDirectory] = useState<ProviderSettingsDirectory | undefined>(undefined)
+  const [providerError, setProviderError] = useState<string | undefined>(undefined)
+  const [authorizationDirectory, setAuthorizationDirectory] = useState<ProviderAuthorizationDirectory | undefined>(undefined)
+  const [authorizationError, setAuthorizationError] = useState<string | undefined>(undefined)
   const [modelLoadEpoch, setModelLoadEpoch] = useState(0)
   const [notice, setNotice] = useState<{ text: string; tone: NoticeTone } | undefined>(undefined)
   const notify = useCallback((text: string, tone: NoticeTone = 'info'): void => {
@@ -3863,21 +3982,21 @@ export function App(props: AppProps): ReactElement {
     return () => {
       cancelled = true
     }
-  }, [modelOpen, modelLoadEpoch, props.loadModelProviders])
-  useEffect(() => {
-    if (!modelOpen || props.loadProviderAuthorizations === undefined) return
-    let cancelled = false
-    setAuthorizationDirectory(undefined)
-    setAuthorizationError(undefined)
-    Promise.resolve().then(() => props.loadProviderAuthorizations!()).then((loaded) => {
-      if (!cancelled) setAuthorizationDirectory(loaded)
-    }, (error: unknown) => {
-      if (!cancelled) setAuthorizationError(error instanceof Error ? error.message : String(error))
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [modelOpen, modelLoadEpoch, props.loadProviderAuthorizations])
+  }, [modelOpen, modelLoadEpoch, props.loadModelProviders])
+  useEffect(() => {
+    if (!modelOpen || props.loadProviderAuthorizations === undefined) return
+    let cancelled = false
+    setAuthorizationDirectory(undefined)
+    setAuthorizationError(undefined)
+    Promise.resolve().then(() => props.loadProviderAuthorizations!()).then((loaded) => {
+      if (!cancelled) setAuthorizationDirectory(loaded)
+    }, (error: unknown) => {
+      if (!cancelled) setAuthorizationError(error instanceof Error ? error.message : String(error))
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [modelOpen, modelLoadEpoch, props.loadProviderAuthorizations])
   useEffect(() => {
     const subscribe = props.subscribeModelProviders
     if (!modelOpen || subscribe === undefined) return
@@ -3886,19 +4005,21 @@ export function App(props: AppProps): ReactElement {
     } catch (error: unknown) {
       setProviderError(error instanceof Error ? error.message : String(error))
     }
-  }, [modelOpen, props.subscribeModelProviders])
-  useEffect(() => {
-    const subscribe = props.subscribeProviderAuthorizations
-    if (!modelOpen || subscribe === undefined) return
-    try {
-      return subscribe(() => setModelLoadEpoch(epoch => epoch + 1))
-    } catch (error: unknown) {
-      setAuthorizationError(error instanceof Error ? error.message : String(error))
-    }
-  }, [modelOpen, props.subscribeProviderAuthorizations])
+  }, [modelOpen, props.subscribeModelProviders])
+  useEffect(() => {
+    const subscribe = props.subscribeProviderAuthorizations
+    if (!modelOpen || subscribe === undefined) return
+    try {
+      return subscribe(() => setModelLoadEpoch(epoch => epoch + 1))
+    } catch (error: unknown) {
+      setAuthorizationError(error instanceof Error ? error.message : String(error))
+    }
+  }, [modelOpen, props.subscribeProviderAuthorizations])
 
   const busy = view.busy
   const [showReasoning, setShowReasoning] = useState(false)
+  // Dedupe for the dynamic-budget tripwire: one warning per distinct shape.
+  const budgetWarnRef = useRef<string | undefined>(undefined)
   const [verboseOpen, setVerboseOpen] = useState(false)
   const [diffView, setDiffView] = useState<GitDiffView | undefined>(undefined)
   const [helpOpen, setHelpOpen] = useState(false)
@@ -4131,6 +4252,22 @@ export function App(props: AppProps): ReactElement {
           ? Math.max(1, Math.floor(streamRows / 3))
           : 1
   const answerRows = view.streaming === '' ? 0 : Math.max(1, streamRows - reasoningRows)
+  // Dynamic-height tripwire: the allocation must fit dynamicRows by
+  // construction; a future edit that breaks the derivation clamps here
+  // (answer, then reasoning, then settled live rows) and warns once.
+  const liveAudit = clampLiveAllocation(
+    { live: visibleLiveLines.length, reasoning: reasoningRows, answer: answerRows },
+    dynamicRows,
+  )
+  if (liveAudit.warning !== undefined && budgetWarnRef.current !== liveAudit.warning) {
+    budgetWarnRef.current = liveAudit.warning
+    console.warn(`[dsh-code] ${liveAudit.warning}`)
+  }
+  const auditedLiveLines = liveAudit.allocation.live === visibleLiveLines.length
+    ? visibleLiveLines
+    : visibleLiveLines.slice(-liveAudit.allocation.live)
+  const auditedReasoningRows = liveAudit.allocation.reasoning
+  const auditedAnswerRows = liveAudit.allocation.answer
   const transcriptVisible = !modelOpen && !helpOpen && !modeOpen && !permissionOpen && !resumeOpen && !pluginOpen && !jobsOpen && !statuslineOpen && !themeOpen && !historyOpen && !agentsOpen && !subagentOpen && !todosOpen && !verboseOpen && diffView === undefined && !approvalPending && !questionPending
   const inspectorVisible = verboseOpen && !approvalPending && !questionPending
   const modalVisible = modelOpen || helpOpen || modeOpen || permissionOpen || resumeOpen || pluginOpen || jobsOpen || statuslineOpen || themeOpen || historyOpen || agentsOpen || subagentOpen || todosOpen || inspectorVisible || diffView !== undefined || approvalPending || questionPending
@@ -4155,7 +4292,7 @@ export function App(props: AppProps): ReactElement {
     appStdout.write(SYNCHRONIZED_UPDATE_END)
   }, [appStdout, refreshEpoch])
   // An idle Ctrl+R fold toggle joins resize and explicit Ctrl+L as a deliberate
-  // source-backed rebuild of native scrollback; busy turns never do.
+  // source-backed rebuild of native scrollback.
 
   // Rendered-history cap: when the settled window overflows the trim
   // hysteresis, one source-backed replay re-windows it (the rebuild branch
@@ -4168,21 +4305,21 @@ export function App(props: AppProps): ReactElement {
     refreshScreen()
   }, [settledNeedsTrim, busy, streamingActive])
 
-  const sessionHasImages = useMemo(() => view.entries.some(entry =>
-    (entry.kind === 'user' || entry.kind === 'pending') && (entry.images?.length ?? 0) > 0), [view.entries])
-
-  /** Apply one /model pick: record the selection, close the panel, report via notice. */
-  const applyModel = (row: ModelRow, effortId: string | undefined): void => {
-    try {
-      const label = props.selectModel(row, effortId)
-      setModelLabel(label)
-      setEffortLabel(effortId)
-      const selected = `${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`
-      if (sessionHasImages && row.inputModalities !== undefined && !row.inputModalities.includes('image')) {
-        notify(`model → ${selected} · image history will be sent as text placeholders`, 'warning')
-      } else {
-        notify(`model → next step uses ${selected}`)
-      }
+  const sessionHasImages = useMemo(() => view.entries.some(entry =>
+    (entry.kind === 'user' || entry.kind === 'pending') && (entry.images?.length ?? 0) > 0), [view.entries])
+
+  /** Apply one /model pick: record the selection, close the panel, report via notice. */
+  const applyModel = (row: ModelRow, effortId: string | undefined): void => {
+    try {
+      const label = props.selectModel(row, effortId)
+      setModelLabel(label)
+      setEffortLabel(effortId)
+      const selected = `${label}${effortId === undefined || effortId === '' ? '' : `@${effortId}`}`
+      if (sessionHasImages && row.inputModalities !== undefined && !row.inputModalities.includes('image')) {
+        notify(`model → ${selected} · image history will be sent as text placeholders`, 'warning')
+      } else {
+        notify(`model → next step uses ${selected}`)
+      }
       setModelOpen(false)
       setProviderOpen(false)
       setProviderAction(undefined)
@@ -4202,44 +4339,44 @@ export function App(props: AppProps): ReactElement {
     setEffortFor(undefined)
   }
   let modelSurface: ReactElement | undefined
-  if (modelOpen && !approvalPending && !questionPending) {
-    if (providerAction?.kind === 'login'
-      && props.beginProviderAuthorization !== undefined
-      && props.cancelProviderAuthorization !== undefined
-      && props.openAuthorizationUrl !== undefined
-      && props.copyTextValue !== undefined) {
-      modelSurface = createElement(ProviderAuthorizationPanel, {
-        row: providerAction.authorization,
-        begin: props.beginProviderAuthorization,
-        cancel: () => props.cancelProviderAuthorization!(providerAction.authorization),
-        openUrl: props.openAuthorizationUrl,
-        copy: props.copyTextValue,
-        done: () => {
-          const authorization = providerAction.authorization
-          setProviderAction(undefined)
-          setProviderOpen(false)
-          reloadModelSurfaces()
-          notify(`logged in to ${authorization.label}; select a model`)
-        },
-        back: () => {
-          setProviderAction(undefined)
-          setProviderOpen(true)
-        },
-      })
-    } else if (providerAction?.kind === 'logout' && props.logoutProviderAuthorization !== undefined) {
-      modelSurface = createElement(ProviderAuthorizationLogoutPanel, {
-        row: providerAction.authorization,
-        confirm: props.logoutProviderAuthorization,
-        done: () => {
-          const authorization = providerAction.authorization
-          setProviderAction(undefined)
-          setProviderOpen(true)
-          reloadModelSurfaces()
-          notify(`logged out from ${authorization.label}`)
-        },
-        back: () => setProviderAction(undefined),
-      })
-    } else if (providerAction?.kind === 'configure' && props.saveModelProviderConfiguration !== undefined) {
+  if (modelOpen && !approvalPending && !questionPending) {
+    if (providerAction?.kind === 'login'
+      && props.beginProviderAuthorization !== undefined
+      && props.cancelProviderAuthorization !== undefined
+      && props.openAuthorizationUrl !== undefined
+      && props.copyTextValue !== undefined) {
+      modelSurface = createElement(ProviderAuthorizationPanel, {
+        row: providerAction.authorization,
+        begin: props.beginProviderAuthorization,
+        cancel: () => props.cancelProviderAuthorization!(providerAction.authorization),
+        openUrl: props.openAuthorizationUrl,
+        copy: props.copyTextValue,
+        done: () => {
+          const authorization = providerAction.authorization
+          setProviderAction(undefined)
+          setProviderOpen(false)
+          reloadModelSurfaces()
+          notify(`logged in to ${authorization.label}; select a model`)
+        },
+        back: () => {
+          setProviderAction(undefined)
+          setProviderOpen(true)
+        },
+      })
+    } else if (providerAction?.kind === 'logout' && props.logoutProviderAuthorization !== undefined) {
+      modelSurface = createElement(ProviderAuthorizationLogoutPanel, {
+        row: providerAction.authorization,
+        confirm: props.logoutProviderAuthorization,
+        done: () => {
+          const authorization = providerAction.authorization
+          setProviderAction(undefined)
+          setProviderOpen(true)
+          reloadModelSurfaces()
+          notify(`logged out from ${authorization.label}`)
+        },
+        back: () => setProviderAction(undefined),
+      })
+    } else if (providerAction?.kind === 'configure' && props.saveModelProviderConfiguration !== undefined) {
       modelSurface = createElement(ProviderConfigurationPanel, {
         target: providerAction.target,
         catalog: directory?.rows ?? [],
@@ -4295,11 +4432,11 @@ export function App(props: AppProps): ReactElement {
         back: () => setProviderAction(undefined),
       })
     } else if (providerOpen) {
-      modelSurface = createElement(ProviderPanel, {
-        directory: providerDirectory,
-        error: providerError,
-        authorizations: authorizationDirectory,
-        authorizationError,
+      modelSurface = createElement(ProviderPanel, {
+        directory: providerDirectory,
+        error: providerError,
+        authorizations: authorizationDirectory,
+        authorizationError,
         onCredential: (target: ProviderTargetView) => {
           if (props.saveModelProviderCredential === undefined) {
             notify('API key storage is unavailable in this profile', 'warning')
@@ -4321,34 +4458,34 @@ export function App(props: AppProps): ReactElement {
           }
           setProviderAction({ kind: 'unset', target })
         },
-        onRemove: (target: ProviderTargetView) => {
+        onRemove: (target: ProviderTargetView) => {
           if (props.removeModelProvider === undefined) {
             notify('provider removal is unavailable in this profile', 'warning')
             return
           }
-          setProviderAction({ kind: 'remove', target })
-        },
-        onLogin: (target: ProviderTargetView, authorization: ProviderAuthorizationRow) => {
-          if (busy) {
-            notify('provider login is available only while the agent is idle', 'warning')
-            return
-          }
-          if (props.beginProviderAuthorization === undefined
-            || props.cancelProviderAuthorization === undefined
-            || props.openAuthorizationUrl === undefined
-            || props.copyTextValue === undefined) {
-            notify('provider login is unavailable in this profile', 'warning')
-            return
-          }
-          setProviderAction({ kind: 'login', target, authorization })
-        },
-        onLogout: (target: ProviderTargetView, authorization: ProviderAuthorizationRow) => {
-          if (props.logoutProviderAuthorization === undefined) {
-            notify('provider logout is unavailable in this profile', 'warning')
-            return
-          }
-          setProviderAction({ kind: 'logout', target, authorization })
-        },
+          setProviderAction({ kind: 'remove', target })
+        },
+        onLogin: (target: ProviderTargetView, authorization: ProviderAuthorizationRow) => {
+          if (busy) {
+            notify('provider login is available only while the agent is idle', 'warning')
+            return
+          }
+          if (props.beginProviderAuthorization === undefined
+            || props.cancelProviderAuthorization === undefined
+            || props.openAuthorizationUrl === undefined
+            || props.copyTextValue === undefined) {
+            notify('provider login is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'login', target, authorization })
+        },
+        onLogout: (target: ProviderTargetView, authorization: ProviderAuthorizationRow) => {
+          if (props.logoutProviderAuthorization === undefined) {
+            notify('provider logout is unavailable in this profile', 'warning')
+            return
+          }
+          setProviderAction({ kind: 'logout', target, authorization })
+        },
         onRetry: reloadModelSurfaces,
         onBack: () => setProviderOpen(false),
       })
@@ -4401,22 +4538,39 @@ export function App(props: AppProps): ReactElement {
         // prefix, so streaming text lands exactly where the composer's input
         // text and the settled reply both render (Codex LIVE_PREFIX).
         { flexDirection: 'column' },
-        visibleLiveLines.length === 0 ? undefined : createElement(StyledRows, { lines: visibleLiveLines }),
-        view.streamingReasoning !== '' && reasoningRows > 0
-          ? createElement(StreamTail, {
-            text: showReasoning ? view.streamingReasoning : 'Thinking… (Ctrl+R to expand)',
-            prefix: '✻ ',
-            continuationPrefix: '  ',
-            dim: true,
-            maxRows: reasoningRows,
-          })
+        auditedLiveLines.length === 0 ? undefined : createElement(StyledRows, { lines: auditedLiveLines }),
+        view.streamingReasoning !== '' && auditedReasoningRows > 0
+          ? showReasoning
+            ? createElement(StreamTail, {
+              text: view.streamingReasoning,
+              prefix: '✻ ',
+              continuationPrefix: '  ',
+              dim: true,
+              maxRows: auditedReasoningRows,
+            })
+            // The collapsed marker shimmers only while reasoning streams
+            // alone: once answer text flows, a periodically re-rendered
+            // animation component would race the store's frame-throttled
+            // notifications and could defer the answer paint by tens to
+            // hundreds of milliseconds (stream-burst contract), so the
+            // marker falls back to the static dim row — same as Deep diving
+            // always yields the live region to streaming content.
+            : view.streaming === ''
+              ? createElement(ShimmerLine, { text: '✻ Thinking… (Ctrl/Alt+R to expand)' })
+              : createElement(StreamTail, {
+                text: 'Thinking… (Ctrl/Alt+R to expand)',
+                prefix: '✻ ',
+                continuationPrefix: '  ',
+                dim: true,
+                maxRows: auditedReasoningRows,
+              })
           : undefined,
-        view.streaming !== '' && answerRows > 0
+        view.streaming !== '' && auditedAnswerRows > 0
           ? createElement(
             StreamTail,
             // The same two-column gutter as settled replies: streamed text
             // lands exactly where the assembled message will render.
-            { text: view.streaming, dim: false, maxRows: answerRows, prefix: '  ' },
+            { text: view.streaming, dim: false, maxRows: auditedAnswerRows, prefix: '  ' },
             busy ? createElement(Caret) : undefined,
           )
           : undefined,
@@ -4424,7 +4578,7 @@ export function App(props: AppProps): ReactElement {
       )
       : undefined,
     transcriptVisible ? createElement(TodoPanel, { todos: view.todos }) : undefined,
-    transcriptVisible ? createElement(AgentsLine, { rows: agentRows }) : undefined,
+    transcriptVisible ? createElement(AgentsLine, { rows: agentRows, total: props.subagents.getTotalSeen() }) : undefined,
     todosOpen && !approvalPending && !questionPending
       ? createElement(MemoTodoListPanel, {
         todos: view.todos,
@@ -4593,16 +4747,17 @@ export function App(props: AppProps): ReactElement {
         descriptors,
         skills,
         dispatch: props.dispatch,
+        applyEditorKeys: props.applyEditorKeys,
         steer: props.steer,
         interrupt: props.interrupt,
         quit: props.quit,
         openModel: () => {
           setDirectory(undefined)
           setModelError(undefined)
-          setProviderDirectory(undefined)
-          setProviderError(undefined)
-          setAuthorizationDirectory(undefined)
-          setAuthorizationError(undefined)
+          setProviderDirectory(undefined)
+          setProviderError(undefined)
+          setAuthorizationDirectory(undefined)
+          setAuthorizationError(undefined)
           setProviderOpen(false)
           setProviderAction(undefined)
           setEffortFor(undefined)
@@ -4692,19 +4847,20 @@ export function App(props: AppProps): ReactElement {
           props.store.reset()
         },
         refresh: refreshScreen,
-        // Ctrl+R flips the reasoning fold. Idle toggles must be visible: rows
-        // already emitted through Static are native scrollback, so the fold
-        // state of past entries can only change through the source-backed
-        // replay (one clear + rebuild, wrapped in a synchronized frame). A
-        // busy/streaming turn stays calm: the live region flips alone and the
-        // entries that settle afterward capture the mode.
+        // Ctrl+R flips the reasoning fold. Rows already emitted through
+        // Static are native scrollback, so the fold state of past entries can
+        // only change through the source-backed replay (one clear + rebuild,
+        // wrapped in a synchronized frame). Every toggle replays globally and
+        // immediately — including mid-turn — so the whole transcript stays at
+        // one fold state; the resize path already proves replaying during a
+        // stream is safe.
         toggleReasoning: () => {
           setShowReasoning(current => !current)
-          if (!busy && !streamingActive) refreshScreen()
+          refreshScreen()
         },
-        loadMentions: props.loadMentions,
-        inspectImages: props.inspectImages,
-        prepareImages: props.prepareImages,
+        loadMentions: props.loadMentions,
+        inspectImages: props.inspectImages,
+        prepareImages: props.prepareImages,
         cyclePermission: props.cyclePermission,
         exportTranscript: props.exportTranscript,
         renameTitle: props.renameTitle,