@mobius-os/mobius 0.3.26 → 0.3.31

package/src/components/Chat.tsx

@@ -8,23 +8,22 @@
  * activity, composer, and a persistent context status line.
  */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Box, Text, useInput, useStdout } from 'ink'
+import { Box, Text, useStdout } from 'ink'
 import { useChat } from '../hooks/useChat.js'
 import { MobiusClient } from '../api.js'
-import { renderMarkdownLines } from '../markdown.js'
-import { viewsForEntry, dedupeUserEntries, toolLabel, isAssistantOutput, type EntryView } from '../lib/entry-view.js'
+import { viewsForEntry, dedupeUserEntries, isAssistantOutput } from '../lib/entry-view.js'
 import {
-  clampLines, headTailLines, displayWidth, compareSel, entryScreenLines,
+  displayWidth, compareSel, entryScreenLines, entryScreenRows,
   buildTranscriptModel, computeTranscriptGeometry, screenToSelPoint,
   buildSelectionMap, buildSelectionText, osc52,
-  type TranscriptModel, type TranscriptGeometry, type SelPoint,
+  type TranscriptModel, type TranscriptGeometry, type SelPoint, type ScreenRow,
 } from '../lib/screen-text.js'
 import type { ReadyState } from './PrepScreen.js'
 import type { AnyEntry } from '../types.js'
 import { ConfigFlow, ReconfigFlow, type ConfigResult } from './ConfigFlow.js'
 import type { AimuxStatus } from '../aimux.js'
 import { AimuxStatusLine, aimuxStatusText } from './AimuxStatus.js'
-import { isEscapeKeypress, isMouseInput, useMouseEvents } from './primitives.js'
+import { isEscapeKeypress, isMouseInput, useMouseEvents, useStableInput } from './primitives.js'
 import { useDeleteKeyCapture, applyDeleteIntent, clampCursor, previousCursorBoundary, nextCursorBoundary } from '../lib/delete-keys.js'
 
 interface ChatProps {
@@ -68,6 +67,11 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
   const [modelLabel, setModelLabel] = useState<string | null>(null)
   const [configOpen, setConfigOpen] = useState(false)
   const [reconfigOpen, setReconfigOpen] = useState(false)
+  // Ink may deliver one final event to Composer while an async config picker is
+  // replacing it. The shared ref lets that stale listener report "not handled"
+  // so App can replay the key after the new Select mounts.
+  const chatInputActiveRef = useRef(true)
+  chatInputActiveRef.current = !configOpen && !reconfigOpen
   // Ink's useInput keeps whatever handler was registered at subscription time;
   // reading mutable refs (updated every render) keeps the callback from acting
   // on a stale `configOpen`/sessionId closure after the config flow opens.
@@ -112,6 +116,16 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
   // (type:user / response_item.message[user] / event_msg.user_message) 合并成 1 条,
   // 避免在累积视图里把同一条提问显示多次.
   const dedupedEntries = useMemo(() => dedupeUserEntries(chat.entries), [chat.entries])
+  // Cache: entry index → rendered line count. Cleared when entries or columns change.
+  const entryLines = useRef<Map<number, number>>(new Map())
+  useEffect(() => { entryLines.current.clear() }, [dedupedEntries, terminal.columns])
+  const getEntryLines = useCallback((i: number) => {
+    const c = entryLines.current.get(i)
+    if (c !== undefined) return c
+    const n = entryScreenLines(viewsForEntry(dedupedEntries[i]), terminal.columns).length || 1
+    entryLines.current.set(i, n)
+    return n
+  }, [dedupedEntries, terminal.columns])
   const viewportRows = terminal.isTty ? Math.max(9, terminal.rows - 1) : terminal.rows
   const activityRows = (chat.typing ? 2 : 0) + (chat.error ? 1 : 0)
   const helpRows = showHelp ? SLASH_COMMANDS.length + 3 : 0
@@ -149,7 +163,7 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
   }, [client, ready.prefs.model])
   const modelDisplay = modelLabel ?? ready.prefs.model ?? 'default'
 
-  useInput((_input, key) => {
+  useStableInput((_input, key) => {
     // While a config/reconfig flow is open, this ChatScreen-level handler owns
     // Esc so cancel is reliable even mid-list-loading (a per-component
     // EscToCancel could be unmounted by the loading→loaded transition and drop
@@ -163,7 +177,7 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
     const step = Math.max(1, fitted.entries.length)
     if (key.pageUp) setScrollBack(value => Math.min(dedupedEntries.length, value + step))
     else if (key.pageDown) setScrollBack(value => Math.max(0, value - step))
-  })
+  }, { interactive: false })
 
   const olderHint = !showWelcome && (fitted.hiddenOlder > 0 || scrollBack > 0)
     ? fitted.hiddenOlder > 0
@@ -214,8 +228,24 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
   useMouseEvents({
     onWheel: (delta) => {
       if (delta === 0) return
-      const step = 3
-      setScrollBack(value => Math.min(dedupedEntries.length, Math.max(0, value + delta * step)))
+      const targetLines = 2
+      let lines = 0
+      let next = scrollBack
+      const n = dedupedEntries.length
+      if (delta > 0) {
+        // scroll up (older): hide more entries from the tail
+        for (let i = n - 1 - next; i >= 0 && lines < targetLines; i--) {
+          lines += getEntryLines(i)
+          next++
+        }
+      } else {
+        // scroll down (newer): unhide entries from the tail
+        for (let i = n - next; i < n && lines < targetLines; i++) {
+          lines += getEntryLines(i)
+          next--
+        }
+      }
+      setScrollBack(Math.min(n, Math.max(0, next)))
     },
     onPress: (row, col) => {
       const p = screenToSelPoint(row, col, transcriptModel, geometry)
@@ -303,19 +333,21 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
           : null}
 
         <Box flexGrow={1} flexShrink={1} flexDirection="column" justifyContent={showWelcome || fitted.hiddenOlder > 0 ? 'flex-start' : 'flex-end'} overflowY="hidden">
-          {fitted.peekLines.length > 0
+          {fitted.peekRows.length > 0
             ? <Box width="100%" flexShrink={0} flexDirection="column">
-                {fitted.peekLines.map((line, index) => (
-                  <Text key={`peek-${index}`} dimColor wrap="truncate-end">{index === 0 ? '  ⋯ ' : '    '}{line}</Text>
+                {fitted.peekRows.map((row, index) => (
+                  <ScreenText
+                    key={`peek-${index}`}
+                    row={row}
+                    text={`${index === 0 ? '  ⋯ ' : '    '}${row.styled}`}
+                  />
                 ))}
               </Box>
             : null}
           {fitted.entries.map((entry, index) => {
             const entrySel = selMap?.get(index)
             const key = entry.__id ?? `entry-${fitted.startIndex + index}`
-            return entrySel
-              ? <EntryScreenWithSelection key={key} entry={entry} columns={terminal.columns} sel={entrySel} />
-              : <EntryAccum key={key} entry={entry} columns={terminal.columns} />
+            return <EntryScreen key={key} entry={entry} columns={terminal.columns} sel={entrySel} />
           })}
           {chat.pendingUser !== null ? <UserLine text={chat.pendingUser} /> : null}
           {fitted.hiddenRecent > 0
@@ -341,6 +373,7 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
           typing={chat.typing}
           commands={SLASH_COMMANDS}
           onHeightChange={setComposerRows}
+          inputActiveRef={chatInputActiveRef}
         />
         <StatusArea
           ready={ready}
@@ -419,149 +452,83 @@ function CompactHeader({ ready, sessionId, columns }: { ready: ReadyState; sessi
   )
 }
 
-function EntryAccum({ entry, columns }: { entry: AnyEntry; columns: number }) {
-  const views = viewsForEntry(entry)
-  return (
-    <Box flexDirection="column">
-      {views.map((view, index) => <ViewLine key={index} view={view} columns={columns} />)}
-    </Box>
-  )
-}
-
-// While a drag-selection is active, the affected entries are re-rendered from the
-// screen-text model (plain rows, no ANSI) so the selected char range can be
-// painted with a background — the same rows the model produces, keeping the
-// layout stable. Rows outside the selection keep their original text.
-function EntryScreenWithSelection({ entry, columns, sel }: {
+// Normal and selected transcript rows use the exact same component tree. Mouse
+// motion now changes only ANSI background bytes inside a row; it never swaps a
+// rich Markdown entry for a structurally different plain-text entry, which used
+// to make long/styled messages jump as the selection crossed entry boundaries.
+function EntryScreen({ entry, columns, sel }: {
   entry: AnyEntry
   columns: number
-  sel: Map<number, { start: number; end: number }>
+  sel?: Map<number, { start: number; end: number }>
 }) {
-  const lines = entryScreenLines(viewsForEntry(entry), columns)
+  const rows = entryScreenRows(viewsForEntry(entry), columns)
   return (
     <Box flexDirection="column">
-      {lines.map((row, index) => {
-        const range = sel.get(index)
-        if (range && range.start < range.end) {
-          return (
-            <Text key={index} wrap="truncate-end">
-              <Text>{row.slice(0, range.start)}</Text>
-              <Text backgroundColor="cyan" color="black">{row.slice(range.start, range.end)}</Text>
-              <Text>{row.slice(range.end)}</Text>
-            </Text>
-          )
-        }
-        return <Text key={index} wrap="truncate-end">{row || ' '}</Text>
+      {rows.map((row, index) => {
+        const range = sel?.get(index)
+        const text = range && range.start < range.end
+          ? highlightScreenRow(row.styled, range.start, range.end)
+          : row.styled
+        return <ScreenText key={index} row={row} text={text || ' '} />
       })}
     </Box>
   )
 }
 
-function ViewLine({ view, columns }: { view: EntryView; columns: number }) {
-  const width = Math.max(8, columns - 4)
-  switch (view.kind) {
-    case 'skip':
-      return null
-    case 'user':
-      return <UserLine text={view.text} />
-    case 'assistant': {
-      const lines = renderMarkdownLines(view.text)
-      return (
-        <Box marginTop={1} flexDirection="column">
-          {lines.map((line, index) => (
-            <Text key={index} wrap={line.code ? 'truncate-end' : 'wrap'}>
-              {index === 0 ? '• ' : '  '}{line.text || ' '}
-            </Text>
-          ))}
-        </Box>
-      )
+function ScreenText({ row, text }: { row: ScreenRow; text: string }) {
+  const tone = row.tone
+  const color = tone === 'tool' ? 'cyan'
+    : tone === 'tool_error' || tone === 'edit_old' || tone === 'error' ? 'red'
+      : tone === 'edit_header' || tone === 'reasoning' ? 'magenta'
+        : tone === 'edit_new' ? 'green'
+          : tone === 'system' ? 'yellow'
+            : undefined
+  const dimColor = tone === 'tool_result' || tone === 'tool_error' || tone === 'reasoning' || tone === 'system'
+  return <Text wrap="truncate-end" bold={tone === 'user'} dimColor={dimColor} color={color}>{text}</Text>
+}
+
+const ANSI_CSI_RE = /^\x1b\[[0-?]*[ -/]*[@-~]/
+const SELECTION_BG = '\x1b[46m'
+const SELECTION_BG_END = '\x1b[49m'
+
+/** Add a background to visible UTF-16 offsets without stripping existing ANSI. */
+function highlightScreenRow(styled: string, start: number, end: number): string {
+  if (start >= end) return styled
+  let out = ''
+  let raw = 0
+  let visible = 0
+  let highlighted = false
+  while (raw < styled.length) {
+    if (styled.charCodeAt(raw) === 0x1b) {
+      const match = ANSI_CSI_RE.exec(styled.slice(raw))
+      if (match) {
+        out += match[0]
+        raw += match[0].length
+        // A full SGR reset inside Markdown/syntax text also resets the injected
+        // background; immediately restore it while the selected span is active.
+        if (highlighted && /^\x1b\[(?:0)?m$/.test(match[0])) out += SELECTION_BG
+        continue
+      }
     }
-    case 'tool_call': {
-      // compact (≤2 行): 命令行 + 可选结果行 (已与 tool_result 合并).
-      const head = clampLines(`${toolLabel(view.toolName)} ${view.summary}`.trim(), width - 2, 1)[0]
-      return (
-        <Box marginTop={1} flexDirection="column">
-          <Text color="cyan">• {head}</Text>
-          {view.result ? (
-            <Text dimColor color={view.result.isError ? 'red' : undefined}>
-              {'  └ '}{clampLines(view.result.text, width - 4, 1)[0] || '(无输出)'}
-            </Text>
-          ) : null}
-        </Box>
-      )
+    const codePoint = styled.codePointAt(raw)!
+    const char = String.fromCodePoint(codePoint)
+    const nextVisible = visible + char.length
+    if (!highlighted && nextVisible > start && visible < end) {
+      out += SELECTION_BG
+      highlighted = true
     }
-    case 'tool_result': {
-      // codex 式 head+ellipsis+tail (output_max_lines=5): tool 结果保留头尾,
-      // 中间省略行数; DIM 样式 + └/缩进前缀 (对齐 codex exec_cell/render.rs).
-      const lines = headTailLines(view.text, width - 4, 5)
-      return (
-        <Box flexDirection="column">
-          {lines.map((l, i) => (
-            <Text key={i} dimColor color={view.isError ? 'red' : undefined}>{i === 0 ? '  └ ' : '    '}{l}</Text>
-          ))}
-        </Box>
-      )
+    if (highlighted && visible >= end) {
+      out += SELECTION_BG_END
+      highlighted = false
     }
-    case 'code_edit':
-      return <CodeEditView view={view} />
-    case 'write_file':
-      return <WriteFileView view={view} />
-    case 'reasoning': {
-      const lines = clampLines(view.text, width - 4, 2)
-      return (
-        <Box marginTop={1} flexDirection="column">
-          {lines.map((line, i) => (
-            <Text key={i} dimColor color="magenta">{i === 0 ? '  ◇ ' : '    '}{line}</Text>
-          ))}
-        </Box>
-      )
-    }
-    case 'system':
-      return <Text dimColor color="yellow">  {clampLines(view.text, width - 2, 2)[0]}</Text>
-    case 'error':
-      return (
-        <Box marginTop={1} flexDirection="column">
-          {view.text.split('\n').map((line, i) => (
-            <Text key={i} color="red">{i === 0 ? '⚠ ' : '  '}{line}</Text>
-          ))}
-        </Box>
-      )
-    default:
-      return null
+    out += char
+    raw += char.length
+    visible = nextVisible
   }
+  if (highlighted) out += SELECTION_BG_END
+  return out
 }
 
-// 代码修改 (Edit/StrReplace/apply_patch) — full: 完整展示 old(−)/new(+) 改动原文.
-function CodeEditView({ view }: { view: { filePath: string; oldString: string; newString: string } }) {
-  return (
-    <Box marginTop={1} flexDirection="column">
-      <Text color="magenta">✎ 编辑 {view.filePath || '(未指定文件)'}</Text>
-      {view.oldString ? view.oldString.split('\n').map((line, i) => (
-        <Text key={`o${i}`} color="red">{'  − '}{line}</Text>
-      )) : null}
-      {view.newString ? view.newString.split('\n').map((line, i) => (
-        <Text key={`n${i}`} color="green">{'  + '}{line}</Text>
-      )) : null}
-    </Box>
-  )
-}
-
-// 文件写入 (Write/create_file) — full: 完整展示写入内容原文.
-function WriteFileView({ view }: { view: { filePath: string; content: string } }) {
-  return (
-    <Box marginTop={1} flexDirection="column">
-      <Text color="magenta">✎ 写入 {view.filePath || '(未指定文件)'}</Text>
-      {view.content.split('\n').map((line, i) => (
-        <Text key={i} color="green">{'  + '}{line}</Text>
-      ))}
-    </Box>
-  )
-}
-
-// clampLines / headTailLines / displayWidth live in src/lib/screen-text.ts
-// (mirrored, exported) and are imported above; they must match ViewLine exactly
-// so the drag-selection text model aligns with the rendered rows.
-
 function UserLine({ text }: { text: string }) {
   const lines = text.split('\n')
   if (lines[0] !== undefined) lines[0] = `› ${lines[0]}`
@@ -627,9 +594,10 @@ interface ComposerProps {
   typing: boolean
   commands: { cmd: string; desc: string }[]
   onHeightChange?: (rows: number) => void
+  inputActiveRef?: React.RefObject<boolean>
 }
 
-export function Composer({ onSubmit, onStop, onQuit, typing, commands, onHeightChange }: ComposerProps) {
+export function Composer({ onSubmit, onStop, onQuit, typing, commands, onHeightChange, inputActiveRef }: ComposerProps) {
   const [value, setValue] = useState('')
   const [cursor, setCursor] = useState(0)
   const [popupIdx, setPopupIdx] = useState(0)
@@ -772,7 +740,8 @@ export function Composer({ onSubmit, onStop, onQuit, typing, commands, onHeightC
 
   useEffect(() => () => resetPasteBurst(), [])
 
-  useInput((input, key) => {
+  useStableInput((input, key) => {
+    if (inputActiveRef?.current === false) return false
     if (isMouseInput(input)) return // mouse events must never become typed text
     const now = Date.now()
     const escape = isEscapeKeypress(input, key)
@@ -979,7 +948,7 @@ function normalizeComposerPaste(text: string): string {
 }
 
 function isEnhancedNewlineInput(input: string): boolean {
-  return /^\[(?:13|27);2(?:u|~)$/.test(input) || input === '\x1b\r'
+  return /^\[13;2u$/.test(input) || /^\[27;2;13~$/.test(input) || input === '\x1b\r'
 }
 
 function findPasteMarker(input: string, code: '200' | '201', from = 0): number {
@@ -1136,50 +1105,17 @@ function clickableUrl(url: string, maxLen?: number): string {
 // displayWidth is imported from src/lib/screen-text.ts (CJK/emoji-aware), used
 // here to size the AIMUX status block so the web URL truncates exactly.
 
-function wrappedRows(text: string, width: number): number {
-  const safeWidth = Math.max(1, width)
-  return text.split('\n').reduce((sum, line) => sum + Math.max(1, Math.ceil(displayWidth(line) / safeWidth)), 0)
-}
-
-function entryRows(entry: AnyEntry, columns: number): number {
-  const width = Math.max(8, columns - 4)
-  return Math.max(1, viewsForEntry(entry).reduce((sum, view) => {
-    switch (view.kind) {
-      case 'skip': return sum
-      case 'user': return sum + 1 + wrappedRows(view.text, width - 2)
-      case 'assistant': {
-        const rows = renderMarkdownLines(view.text).reduce((total, line) => {
-          return total + (line.code ? 1 : wrappedRows(line.text || ' ', width - 2))
-        }, 0)
-        return sum + 1 + rows
-      }
-      case 'tool_call': return sum + 2 + (view.result ? 1 : 0)
-      case 'tool_result': return sum + headTailLines(view.text, width - 4, 5).length
-      case 'code_edit':
-        return sum + 2 + wrappedRows(view.filePath || '(未指定文件)', width - 4)
-          + wrappedRows(view.oldString, width - 4) + wrappedRows(view.newString, width - 4)
-      case 'write_file':
-        return sum + 2 + wrappedRows(view.filePath || '(未指定文件)', width - 4)
-          + wrappedRows(view.content, width - 4)
-      case 'reasoning': return sum + 1 + clampLines(view.text, width - 4, 2).length
-      case 'system': return sum + 1
-      case 'error': return sum + 1 + wrappedRows(view.text, width - 2)
-      default: return sum
-    }
-  }, 0))
-}
-
-function fitTranscript(entries: AnyEntry[], rowBudget: number, columns: number, scrollBack = 0): {
+export function fitTranscript(entries: AnyEntry[], rowBudget: number, columns: number, scrollBack = 0): {
   entries: AnyEntry[]
   /** Tail rows of the next older entry, used to fill spare space above the viewport. */
-  peekLines: string[]
+  peekRows: ScreenRow[]
   hiddenOlder: number
   hiddenRecent: number
   startIndex: number
 } {
   const tail = Math.max(0, entries.length - scrollBack)
   const available = tail === 0 ? [] : entries.slice(0, tail)
-  const renderedRows = available.map((entry) => entryScreenLines(viewsForEntry(entry), columns))
+  const renderedRows = available.map((entry) => entryScreenRows(viewsForEntry(entry), columns))
   const fit = (budget: number) => {
     let rows = 0
     let first = available.length
@@ -1195,7 +1131,7 @@ function fitTranscript(entries: AnyEntry[], rowBudget: number, columns: number,
   const base = fit(rowBudget)
   let fitted = base
   let first = fitted.first
-  let peekLines: string[] = []
+  let peekRows: ScreenRow[] = []
   // When older history exists, guarantee at least one row for the tail of the
   // next older message. If complete entries exactly consume the budget, refit
   // them with one fewer row; only the oldest complete entry can drop out, while
@@ -1209,17 +1145,17 @@ function fitTranscript(entries: AnyEntry[], rowBudget: number, columns: number,
         first = reduced.first
       }
     }
-    const olderLines = renderedRows[first - 1].slice()
-    while (olderLines.length > 0 && !olderLines[0].trim()) olderLines.shift()
-    while (olderLines.length > 0 && !olderLines[olderLines.length - 1].trim()) olderLines.pop()
+    const olderRows = renderedRows[first - 1].slice()
+    while (olderRows.length > 0 && !olderRows[0].plain.trim()) olderRows.shift()
+    while (olderRows.length > 0 && !olderRows[olderRows.length - 1].plain.trim()) olderRows.pop()
     const spare = rowBudget - fitted.rows
-    if (spare > 0 && olderLines.length > 0) {
-      peekLines = olderLines.slice(-spare)
+    if (spare > 0 && olderRows.length > 0) {
+      peekRows = olderRows.slice(-spare)
     }
   }
   return {
     entries: available.slice(first),
-    peekLines,
+    peekRows,
     hiddenOlder: first,
     hiddenRecent: entries.length - tail,
     startIndex: first,

package/src/components/ConfigFlow.tsx

@@ -322,6 +322,7 @@ export function ReconfigFlow({ client, onDone }: {
                     { label: '➕ 创建新项目', value: '__create__' },
                     ...projects.map(p => ({ label: p.name, value: p.id, desc: p.description })),
                   ]}
+                  initialActive={projects.length > 0 ? 1 : 0}
                   onSelect={v => v === '__create__' ? setCreateMode('project') : pickProject(projects!.find(p => p.id === v)!)}
                 />}
           </Box>
@@ -345,6 +346,7 @@ export function ReconfigFlow({ client, onDone }: {
                       { label: '➕ 创建新任务', value: '__create__' },
                       ...issues.map(i => ({ label: i.title, value: i.id, desc: i.description })),
                     ]}
+                    initialActive={1}
                     onSelect={v => v === '__create__' ? setCreateMode('issue') : pickIssue(issues!.find(i => i.id === v)!)} />}
           </Box>
           <Text color="gray">↑↓ 选择 · 回车确认 · Esc 取消</Text>

package/src/components/primitives.tsx

@@ -3,9 +3,123 @@
  * Select (single-choice list + multi-choice with checkboxes), and a Spinner.
  */
 import React, { useEffect, useRef, useState } from 'react'
-import { Box, Text, useInput, useStdout, useStdin } from 'ink'
+import { Box, Text, useInput, useStdout, useStdin, type Key } from 'ink'
 import { useDeleteKeyCapture, applyDeleteIntent } from '../lib/delete-keys.js'
 
+/** Return false when a mounted listener deliberately did not consume the input. */
+type InputHandler = (input: string, key: Key) => void | false
+
+type StableInputOptions = {
+  isActive?: boolean
+  /** Passive listeners (App raw-mode keepalive, Chat paging) must not claim or receive replayed input. */
+  interactive?: boolean
+}
+
+type ReplayInput = { input: string; key: Key; signature: string; claimed: boolean }
+
+const pendingRootInputs: ReplayInput[] = []
+const replayQueue: ReplayInput[] = []
+const interactiveHandlers = new Set<InputHandler>()
+const earlyClaimCredits = new Map<string, number>()
+let earlyClaimCleanupScheduled = false
+let replayingInput = false
+
+function inputSignature(input: string, key: Key): string {
+  const flags = Object.keys(key)
+    .filter(name => Boolean((key as unknown as Record<string, unknown>)[name]))
+    .sort()
+    .join(',')
+  return `${input}\u0000${flags}`
+}
+
+function markRootInputClaimed(input: string, key: Key): void {
+  const signature = inputSignature(input, key)
+  const pending = pendingRootInputs.find(event => !event.claimed && event.signature === signature)
+  if (pending) {
+    pending.claimed = true
+    return
+  }
+
+  // React/Ink may register a child's listener before the App listener. Keep a
+  // one-microtask credit so the root callback later in the same emitter pass
+  // recognizes that this exact input was already handled.
+  earlyClaimCredits.set(signature, (earlyClaimCredits.get(signature) ?? 0) + 1)
+  if (!earlyClaimCleanupScheduled) {
+    earlyClaimCleanupScheduled = true
+    queueMicrotask(() => {
+      earlyClaimCredits.clear()
+      earlyClaimCleanupScheduled = false
+    })
+  }
+}
+
+function deliverOrQueue(event: ReplayInput): void {
+  for (const handler of Array.from(interactiveHandlers).reverse()) {
+    replayingInput = true
+    try {
+      if (handler(event.input, event.key) !== false) return
+    } finally {
+      replayingInput = false
+    }
+  }
+  replayQueue.push(event)
+  if (replayQueue.length > 8) replayQueue.shift()
+}
+
+/**
+ * App-level input safety net. It stays mounted across async route changes and
+ * only buffers a key when no interactive Ink listener claimed that emitter
+ * pass. The next Select/TextInput/Composer receives the key after it mounts.
+ */
+export function bufferUnclaimedInput(input: string, key: Key): void {
+  if (isMouseInput(input)) return
+  const signature = inputSignature(input, key)
+  const credits = earlyClaimCredits.get(signature) ?? 0
+  if (credits > 0) {
+    if (credits === 1) earlyClaimCredits.delete(signature)
+    else earlyClaimCredits.set(signature, credits - 1)
+    return
+  }
+
+  const event: ReplayInput = { input, key: { ...key }, signature, claimed: false }
+  pendingRootInputs.push(event)
+  setTimeout(() => {
+    const index = pendingRootInputs.indexOf(event)
+    if (index >= 0) pendingRootInputs.splice(index, 1)
+    if (!event.claimed) deliverOrQueue(event)
+  }, 0)
+}
+
+/** Keep one Ink listener while a component rerenders; read the latest handler through a ref. */
+export function useStableInput(handler: InputHandler, options?: StableInputOptions): void {
+  const handlerRef = useRef(handler)
+  handlerRef.current = handler
+  const stableRef = useRef<InputHandler | null>(null)
+  const interactive = options?.interactive !== false
+  if (!stableRef.current) {
+    stableRef.current = (input, key) => {
+      const handled = handlerRef.current(input, key)
+      if (interactive && !replayingInput && handled !== false) markRootInputClaimed(input, key)
+      return handled
+    }
+  }
+  useInput(stableRef.current, { isActive: options?.isActive })
+
+  useEffect(() => {
+    if (!interactive || options?.isActive === false || !stableRef.current) return
+    const stable = stableRef.current
+    interactiveHandlers.add(stable)
+    const queued = replayQueue.splice(0)
+    replayingInput = true
+    try {
+      for (const event of queued) stable(event.input, event.key)
+    } finally {
+      replayingInput = false
+    }
+    return () => { interactiveHandlers.delete(stable) }
+  }, [interactive, options?.isActive])
+}
+
 /** Windows Terminal/ConPTY may expose Esc as a named key, a raw byte, or Ctrl+[. */
 export function isEscapeKeypress(input: string, key: { escape?: boolean; ctrl?: boolean }): boolean {
   return key.escape === true || input === '\x1b' || (key.ctrl === true && input === '[')
@@ -185,7 +299,7 @@ export function TextInput(props: TextInputProps) {
     edit(text, nextCursor)
   })
 
-  useInput((input, key) => {
+  useStableInput((input, key) => {
     if (isMouseInput(input)) return
     if (key.return) { props.onSubmit?.(); return }
     if (key.upArrow) { props.onArrowUp?.(); return }
@@ -298,24 +412,28 @@ export interface SelectProps {
   focused?: boolean
   title?: string
   maxVisible?: number // cap rendered rows so long lists never overflow the terminal
+  initialActive?: number // initial keyboard focus; useful when a create action occupies row 0
 }
 
 export function Select(props: SelectProps) {
   const mode = props.mode ?? 'single'
-  const [active, setActive] = useState(0)
+  const [active, setActive] = useState(() => Math.max(0, props.initialActive ?? 0))
   const items = props.items
   const selectedSet = new Set<string>(mode === 'multi' ? (props.selected as string[]) ?? [] : [])
   const { stdout } = useStdout()
 
   useEffect(() => { setActive(a => Math.min(a, Math.max(0, items.length - 1))) }, [items.length])
 
-  useInput((input, key) => {
+  useStableInput((input, key) => {
     if (!items.length) return
     if (isMouseInput(input)) return
     if (key.upArrow) { setActive(a => (a - 1 + items.length) % items.length); return }
     if (key.downArrow) { setActive(a => (a + 1) % items.length); return }
     if (mode === 'single') {
-      if (key.return) { props.onSelect?.(items[active].value); return }
+      if (key.return) {
+        props.onSelect?.(items[active].value)
+        return
+      }
     } else {
       if (key.return) { props.onConfirm?.(Array.from(selectedSet)); return }
       if (input === ' ') { props.onToggle?.(items[active].value); return }