@mobius-os/mobius 0.3.27 → 0.3.31

package/src/components/Chat.tsx

@@ -11,13 +11,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 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'
@@ -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.
@@ -173,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
@@ -329,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
@@ -367,6 +373,7 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
           typing={chat.typing}
           commands={SLASH_COMMANDS}
           onHeightChange={setComposerRows}
+          inputActiveRef={chatInputActiveRef}
         />
         <StatusArea
           ready={ready}
@@ -445,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]}`
@@ -653,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)
@@ -799,6 +741,7 @@ export function Composer({ onSubmit, onStop, onQuit, typing, commands, onHeightC
   useEffect(() => () => resetPasteBurst(), [])
 
   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)
@@ -1005,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 {
@@ -1162,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
@@ -1221,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
@@ -1235,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

@@ -6,15 +6,118 @@ import React, { useEffect, useRef, useState } from 'react'
 import { Box, Text, useInput, useStdout, useStdin, type Key } from 'ink'
 import { useDeleteKeyCapture, applyDeleteIntent } from '../lib/delete-keys.js'
 
-type InputHandler = (input: string, key: Key) => void
+/** 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?: { isActive?: boolean }): void {
+export function useStableInput(handler: InputHandler, options?: StableInputOptions): void {
   const handlerRef = useRef(handler)
   handlerRef.current = handler
   const stableRef = useRef<InputHandler | null>(null)
-  if (!stableRef.current) stableRef.current = (input, key) => handlerRef.current(input, key)
-  useInput(stableRef.current, options)
+  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+[. */
@@ -309,11 +412,12 @@ 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()
@@ -326,7 +430,10 @@ export function Select(props: SelectProps) {
     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 }