@mobius-os/mobius 0.3.15 → 0.3.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobius-os/mobius",
-  "version": "0.3.15",
+  "version": "0.3.20",
   "type": "module",
   "description": "Mobius terminal client. Reuses Mobius frontend TypeScript types and jsonl entry shapes.",
   "bin": {
@@ -22,7 +22,8 @@
     "ink": "5.2.0",
     "marked": "12.0.2",
     "react": "18.3.1",
-    "tsx": "4.19.2"
+    "tsx": "4.19.2",
+    "wrap-ansi": "^9.0.0"
   },
   "engines": {
     "node": ">=18"

package/src/App.tsx

@@ -16,6 +16,7 @@ import { loadLogin, saveLogin, type LoginRecord } from './config.js'
 import { LoginScreen } from './components/Login.js'
 import { PrepScreen, type ReadyState } from './components/PrepScreen.js'
 import { ChatScreen } from './components/Chat.js'
+import type { ConfigResult } from './components/ConfigFlow.js'
 import { ResumePicker } from './components/ResumePicker.js'
 import { Screen } from './components/Screen.js'
 import { startAimuxConnection, stopAimuxConnection, type AimuxStatus } from './aimux.js'
@@ -107,6 +108,31 @@ export function App() {
 
   function onResume() { if (process.env.MOBIUS_TUI_DEBUG) console.error('[route] resume'); setRoute('resume') }
 
+  // /model (= /config) Esc-cancel: go back to the conversation. Remounting Chat
+  // (rather than re-rendering it in place) is deliberate — toggling the config
+  // flow off and on re-mounted the whole chat subtree, which left Ink's frame
+  // blank in the harness. Remount via chatKey is the same path /clear and /resume
+  // use; the live sessionId (if any) is carried as resumeSessionId so the
+  // conversation is reconnected intact.
+  function onConfigCancel(sessionId: string | null) {
+    if (process.env.MOBIUS_TUI_DEBUG) console.error('[route] config-cancel', sessionId)
+    setResumeSessionId(sessionId)
+    setChatKey(k => k + 1)
+    setRoute('chat')
+  }
+
+  // /model (= /config): swap task+model and start a brand-new session. App owns
+  // `ready`, so it folds the ConfigFlow result in and remounts Chat on the fresh
+  // session (resumeSessionId = the eagerly created session).
+  function onReconfigure(result: ConfigResult) {
+    if (!ready || !client) return
+    if (process.env.MOBIUS_TUI_DEBUG) console.error('[route] reconfigure', result.issue.id, result.prefs.model, result.sessionId)
+    setReady({ project: ready.project, issue: result.issue, prefs: result.prefs })
+    setResumeSessionId(result.sessionId)
+    setChatKey(k => k + 1)
+    setRoute('chat')
+  }
+
   function onResumed(sid: string) {
     setResumeSessionId(sid)
     setChatKey(k => k + 1)
@@ -135,6 +161,8 @@ export function App() {
         onClear={onClear}
         onResume={onResume}
         onQuit={onQuit}
+        onReconfigure={onReconfigure}
+        onConfigCancel={onConfigCancel}
         aimuxStatus={aimuxStatus}
       />
     )

package/src/components/Chat.tsx

@@ -13,11 +13,19 @@ 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 {
+  clampLines, headTailLines, displayWidth, compareSel, entryScreenLines,
+  buildTranscriptModel, computeTranscriptGeometry, screenToSelPoint,
+  buildSelectionMap, buildSelectionText, osc52,
+  type TranscriptModel, type TranscriptGeometry, type SelPoint,
+} from '../lib/screen-text.js'
 import type { ReadyState } from './PrepScreen.js'
 import type { AnyEntry } from '../types.js'
+import { ConfigFlow, type ConfigResult } from './ConfigFlow.js'
 import type { AimuxStatus } from '../aimux.js'
 import { AimuxStatusLine, aimuxStatusText } from './AimuxStatus.js'
-import { isEscapeKeypress, isMouseInput, useMouseWheel } from './primitives.js'
+import { isEscapeKeypress, isMouseInput, useMouseEvents } from './primitives.js'
+import { useDeleteKeyCapture, applyDeleteIntent, clampCursor, previousCursorBoundary, nextCursorBoundary } from '../lib/delete-keys.js'
 
 interface ChatProps {
   client: MobiusClient
@@ -27,6 +35,8 @@ interface ChatProps {
   onClear: () => void
   onResume: () => void
   onQuit: () => void
+  onReconfigure: (result: ConfigResult) => void
+  onConfigCancel: (sessionId: string | null) => void
   aimuxStatus?: AimuxStatus
 }
 
@@ -44,16 +54,24 @@ const STATUS_ROWS = 3
 const SLASH_COMMANDS = [
   { cmd: '/clear', desc: '清空当前对话，开启新会话' },
   { cmd: '/resume', desc: '恢复一个历史会话' },
+  { cmd: '/model', desc: '更换模型并开启新会话（保留当前任务）' },
+  { cmd: '/config', desc: '更换模型（/model 的别名）' },
   { cmd: '/help', desc: '显示帮助' },
   { cmd: '/quit', desc: '退出 TUI' },
 ]
 
-export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear, onResume, onQuit, aimuxStatus }: ChatProps) {
+export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear, onResume, onQuit, onReconfigure, onConfigCancel, aimuxStatus }: ChatProps) {
   const chat = useChat({ client, ready, resumeSessionId })
   const [showHelp, setShowHelp] = useState(false)
   const [scrollBack, setScrollBack] = useState(0)
   const [composerRows, setComposerRows] = useState(DEFAULT_COMPOSER_ROWS)
   const [modelLabel, setModelLabel] = useState<string | null>(null)
+  const [configOpen, setConfigOpen] = useState(false)
+  // 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.
+  const handlerRef = useRef<{ configOpen: boolean; sessionId: string | null }>({ configOpen: false, sessionId: null })
+  handlerRef.current = { configOpen, sessionId: chat.sessionId }
   const terminal = useTerminalSize()
 
   const runSlash = useCallback((raw: string) => {
@@ -62,6 +80,7 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
       case '/clear': onClear(); return true
       case '/resume': onResume(); return true
       case '/help': setShowHelp(s => !s); return true
+      case '/model': case '/config': setConfigOpen(true); return true
       case '/quit': case '/exit': onQuit(); return true
       default: return false
     }
@@ -129,27 +148,120 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
   const modelDisplay = modelLabel ?? ready.prefs.model ?? 'default'
 
   useInput((_input, key) => {
+    // While the config 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 the keypress).
+    // configOpen/sessionId are read from handlerRef (see above) because Ink keeps
+    // the originally-registered callback and would otherwise see a stale closure.
+    if (handlerRef.current.configOpen) {
+      if (isEscapeKeypress(_input, key)) onConfigCancel(handlerRef.current.sessionId)
+      return
+    }
     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))
   })
 
-  // Mouse wheel: up scrolls back through history, down returns toward the
-  // latest, mirroring PageUp/PageDown but in small fixed steps. Handled on the
-  // Ink event emitter (not useInput) so the sequence can be buffered across
-  // read() chunks; the Composer guards against inserting mouse bytes as text.
-  useMouseWheel((delta) => {
-    if (delta === 0) return
-    const step = 3
-    setScrollBack(value => Math.min(dedupedEntries.length, Math.max(0, value + delta * step)))
-  })
-
   const olderHint = !showWelcome && (fitted.hiddenOlder > 0 || scrollBack > 0)
     ? fitted.hiddenOlder > 0
-      ? `↑ 还有 ${fitted.hiddenOlder} 条较早记录 · 滚轮/PageUp 向上翻页`
-      : '已到最早记录 · 滚轮/PageDown 向下翻页'
+      ? `↑ 还有 ${fitted.hiddenOlder} 条较早记录 · 滚轮/PageUp 翻页 · 拖动选中文本`
+      : '已到最早记录 · 滚轮/PageDown 翻页 · 拖动选中文本'
     : null
 
+  // Mouse: wheel pages through history in small fixed steps, and a left-button
+  // drag selects transcript text (tmux-style: the app owns the mouse, draws its
+  // own highlight, and copies the range via OSC 52 on release). Handled on the
+  // Ink event emitter (not useInput) so sequences can be buffered across read()
+  // chunks; the Composer guards against inserting mouse bytes as typed text.
+  const { stdout } = useStdout()
+  const selState = useRef<{ anchor: SelPoint; end: SelPoint; active: boolean } | null>(null)
+  const [sel, setSel] = useState<{ anchor: SelPoint; end: SelPoint; active: boolean } | null>(null)
+  const [copyNotice, setCopyNotice] = useState<string | null>(null)
+
+  // Geometry + text model must mirror the rendered transcript so a screen
+  // (row, col) maps to the right entry/line/char. Recompute with the fitted view.
+  const tipShown = dedupedEntries.length === 0 && chat.pendingUser === null && !showHelp
+  const geometry: TranscriptGeometry = useMemo(() => computeTranscriptGeometry({
+    viewportRows,
+    composerRows,
+    statusRows: STATUS_ROWS,
+    activityRows,
+    helpRows,
+    showWelcome,
+    welcomeRows: 10,
+    olderHintShown: olderHint !== null,
+    tipShown,
+  }), [viewportRows, composerRows, activityRows, helpRows, showWelcome, olderHint, tipShown])
+  const transcriptModel: TranscriptModel = useMemo(
+    () => buildTranscriptModel(fitted.entries, terminal.columns),
+    [fitted.entries, terminal.columns],
+  )
+  const selMap = useMemo(
+    () => (sel?.active ? buildSelectionMap(transcriptModel, sel.anchor, sel.end) : null),
+    [sel, transcriptModel],
+  )
+
+  const commitCopy = useCallback((anchor: SelPoint, end: SelPoint) => {
+    const text = buildSelectionText(transcriptModel, anchor, end)
+    if (!text) return
+    stdout.write(osc52(text))
+    setCopyNotice(`已复制 ${Array.from(text).length} 字符`)
+  }, [transcriptModel, stdout])
+
+  useMouseEvents({
+    onWheel: (delta) => {
+      if (delta === 0) return
+      const step = 3
+      setScrollBack(value => Math.min(dedupedEntries.length, Math.max(0, value + delta * step)))
+    },
+    onPress: (row, col) => {
+      const p = screenToSelPoint(row, col, transcriptModel, geometry)
+      if (p) { selState.current = { anchor: p, end: p, active: true }; setSel(selState.current) }
+    },
+    onMotion: (row, col) => {
+      const s = selState.current
+      if (!s?.active) return
+      const p = screenToSelPoint(row, col, transcriptModel, geometry)
+      if (p) { selState.current = { ...s, end: p }; setSel(selState.current) }
+    },
+    onRelease: () => {
+      const s = selState.current
+      selState.current = null
+      setSel(null)
+      if (s?.active && compareSel(s.anchor, s.end) !== 0) commitCopy(s.anchor, s.end)
+    },
+  })
+
+  // Transient "已复制 N 字符" notice in the status row, then it clears itself.
+  useEffect(() => {
+    if (!copyNotice) return
+    const id = setTimeout(() => setCopyNotice(null), 2500)
+    return () => clearTimeout(id)
+  }, [copyNotice])
+
+  if (configOpen) {
+    // Keep the SAME height-pinned root box the chat uses, so the frame stays
+    // exactly terminal-height whether the flow is open or the conversation is
+    // shown. Rendering the flow at its natural (shorter) height and then
+    // re-painting the tall chat on Esc made Ink's frame accounting go blank in
+    // the harness (and looked like a glitch in real terminals too).
+    return (
+      <Box
+        flexDirection="column"
+        width={terminal.isTty ? terminal.columns : undefined}
+        height={terminal.isTty ? viewportRows : undefined}
+        paddingX={1}
+        overflowY="hidden"
+      >
+        <ConfigFlow
+          client={client}
+          issue={ready.issue}
+          onDone={(result) => onReconfigure(result)}
+        />
+      </Box>
+    )
+  }
+
   return (
     <Box
       flexDirection="column"
@@ -167,16 +279,20 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
             always the first line of the transcript, spanning the full width,
             instead of floating mid-screen when the transcript has spare rows. */}
         {olderHint !== null
-          ? <Box width="100%" flexShrink={0}><Text dimColor>  {olderHint}</Text></Box>
+          ? <Box width="100%" flexShrink={0}><Text dimColor wrap="truncate-end">  {olderHint}</Text></Box>
           : null}
 
         <Box flexGrow={1} flexShrink={1} flexDirection="column" justifyContent={showWelcome ? 'flex-start' : 'flex-end'} overflowY="hidden">
-          {fitted.entries.map((entry, index) => (
-            <EntryAccum key={entry.__id ?? `entry-${fitted.startIndex + index}`} entry={entry} columns={terminal.columns} />
-          ))}
+          {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} />
+          })}
           {chat.pendingUser !== null ? <UserLine text={chat.pendingUser} /> : null}
           {fitted.hiddenRecent > 0
-            ? <Box width="100%" flexShrink={0}><Text dimColor>  ↓ 滚轮/PageDown 向下翻页 · 较新 {fitted.hiddenRecent} 条</Text></Box>
+            ? <Box width="100%" flexShrink={0}><Text dimColor wrap="truncate-end">  ↓ 滚轮/PageDown 翻页 · 较新 {fitted.hiddenRecent} 条</Text></Box>
             : null}
         </Box>
 
@@ -206,6 +322,7 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
           webUrl={buildWebUrl(client.server, webUserId, ready, chat.sessionId)}
           aimuxStatus={aimuxStatus}
           modelDisplay={modelDisplay}
+          copyNotice={copyNotice}
         />
       </Box>
     </Box>
@@ -284,6 +401,35 @@ function EntryAccum({ entry, columns }: { entry: AnyEntry; columns: number }) {
   )
 }
 
+// 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 }: {
+  entry: AnyEntry
+  columns: number
+  sel: Map<number, { start: number; end: number }>
+}) {
+  const lines = entryScreenLines(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>
+      })}
+    </Box>
+  )
+}
+
 function ViewLine({ view, columns }: { view: EntryView; columns: number }) {
   const width = Math.max(8, columns - 4)
   switch (view.kind) {
@@ -385,41 +531,9 @@ function WriteFileView({ view }: { view: { filePath: string; content: string } }
   )
 }
 
-// 把文本按宽度硬切成最多 maxLines 行 (超出则在末行加 …), 用于 compact 类的 ≤2 行硬约束.
-function clampLines(text: string, width: number, maxLines: number): string[] {
-  if (!text) return ['']
-  const paras = text.replace(/\r\n/g, '\n').split('\n')
-  const wrapped: string[] = []
-  for (const para of paras) {
-    if (para === '') { wrapped.push(''); continue }
-    for (let i = 0; i < para.length; i += width) wrapped.push(para.slice(i, i + width))
-  }
-  if (wrapped.length <= maxLines) return wrapped
-  const trimmed = wrapped.slice(0, maxLines)
-  const last = trimmed[maxLines - 1]
-  trimmed[maxLines - 1] = last.length >= width ? last.slice(0, width - 1) + '…' : last + '…'
-  return trimmed
-}
-
-// codex 式 head + ellipsis + tail 截断 (参考 codex-rs/tui/src/exec_cell/render.rs
-// 的 truncate_lines_middle): 保留输出头尾, 中间省略并报告省略行数. 长输出既能看
-// 到结论 (成功/失败常在尾), 又不刷屏. maxLines 含省略行 (如 5 = 头2 + 省1 + 尾2).
-function headTailLines(text: string, width: number, maxLines: number): string[] {
-  if (!text) return ['']
-  const paras = text.replace(/\r\n/g, '\n').split('\n')
-  const wrapped: string[] = []
-  for (const para of paras) {
-    if (para === '') { wrapped.push(''); continue }
-    for (let i = 0; i < para.length; i += width) wrapped.push(para.slice(i, i + width))
-  }
-  if (wrapped.length <= maxLines) return wrapped.slice(0, maxLines)
-  const budget = maxLines - 1 // 留 1 行给省略标记
-  const head = Math.max(1, Math.ceil(budget / 2))
-  const tail = Math.max(1, budget - head)
-  const omitted = wrapped.length - head - tail
-  if (omitted <= 0) return wrapped.slice(0, maxLines)
-  return [...wrapped.slice(0, head), `… +${omitted} 行`, ...wrapped.slice(wrapped.length - tail)]
-}
+// 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')
@@ -463,6 +577,9 @@ export function shimmerText(label: string, frame: number): React.ReactNode[] {
 }
 
 function HelpBlock({ commands }: { commands: { cmd: string; desc: string }[] }) {
+  const mouseNote = process.env.MOBIUS_TUI_DISABLE_MOUSE === '1'
+    ? '滚轮翻页已关闭 (MOBIUS_TUI_DISABLE_MOUSE=1)，鼠标可用于直接选中文本。'
+    : '滚轮翻页 · 拖动选中文本，松开即经 OSC 52 复制到剪贴板。'
   return (
     <Box flexDirection="column" borderStyle="round" borderColor="gray" borderDimColor paddingX={1} marginTop={1}>
       {commands.map(command => (
@@ -471,6 +588,7 @@ function HelpBlock({ commands }: { commands: { cmd: string; desc: string }[] })
           <Text>{command.desc}</Text>
         </Text>
       ))}
+      <Text dimColor>  {mouseNote}</Text>
     </Box>
   )
 }
@@ -504,6 +622,15 @@ export function Composer({ onSubmit, onStop, onQuit, typing, commands, onHeightC
   })
   const { stdout } = useStdout()
 
+  // Physical Backspace/Delete keys are owned by useDeleteKeyCapture from the
+  // raw stdin bytes — Ink reports the Backspace key (\x7f) and the Delete key
+  // (ESC[3~) both as `key.delete`, so handling `key.delete` in useInput would
+  // delete in the wrong direction. The composer is always active while mounted.
+  useDeleteKeyCapture(true, (intent) => {
+    const { text, cursor: nextCursor } = applyDeleteIntent(valueRef.current, cursorRef.current, intent)
+    edit(text, nextCursor)
+  })
+
   const filtered = useMemo(() => {
     const match = /^(\w*)$/.exec(value.slice(1))
     if (!value.startsWith('/') || match === null) return []
@@ -685,20 +812,22 @@ export function Composer({ onSubmit, onStop, onQuit, typing, commands, onHeightC
       return
     }
     if (key.ctrl && input === 'c') { typing ? void onStop() : onQuit(); return }
-    // Ink reports the terminal Backspace key (\x7f) as `key.delete`; handle both
-    // as a backward delete so Backspace works at the end of the input.
-    if (key.backspace || key.delete || (key.ctrl && (input === 'h' || input === 'w'))) {
-      if (at > 0) {
-        if (key.ctrl && input === 'w') {
-          const before = current.slice(0, at)
-          const match = before.match(/\S+\s*$/)
-          const cut = match ? match[0].length : 0
-          edit(current.slice(0, at - cut) + current.slice(at), at - cut)
-        } else {
-          const previous = previousCursorBoundary(current, at)
-          edit(current.slice(0, previous) + current.slice(at), previous)
-        }
-      }
+    // Physical Backspace/Delete keys are handled by useDeleteKeyCapture above
+    // (raw stdin bytes distinguish them; Ink maps both to `key.delete`). Only
+    // the unambiguous logical editing bindings stay here.
+    if (key.ctrl && input === 'w') {
+      const { text, cursor: nextCursor } = applyDeleteIntent(current, at, 'backward-word')
+      edit(text, nextCursor)
+      return
+    }
+    if (key.ctrl && input === 'h') {
+      const { text, cursor: nextCursor } = applyDeleteIntent(current, at, 'backward')
+      edit(text, nextCursor)
+      return
+    }
+    if (key.ctrl && input === 'd') {
+      const { text, cursor: nextCursor } = applyDeleteIntent(current, at, 'forward')
+      edit(text, nextCursor)
       return
     }
     if (key.leftArrow) { moveCursor(previousCursorBoundary(current, at)); return }
@@ -840,26 +969,6 @@ function pasteMarkerLength(input: string, at: number, code: '200' | '201'): numb
   return input.startsWith(`\x1b[${code}~`, at) ? 6 : 5
 }
 
-function clampCursor(text: string, cursor: number): number {
-  let at = Math.max(0, Math.min(text.length, cursor))
-  while (at > 0 && at < text.length && /[\uDC00-\uDFFF]/.test(text[at])) at--
-  return at
-}
-
-function previousCursorBoundary(text: string, cursor: number): number {
-  const at = clampCursor(text, cursor)
-  if (at <= 0) return 0
-  const code = text.charCodeAt(at - 1)
-  return at - (code >= 0xDC00 && code <= 0xDFFF ? 2 : 1)
-}
-
-function nextCursorBoundary(text: string, cursor: number): number {
-  const at = clampCursor(text, cursor)
-  if (at >= text.length) return text.length
-  const code = text.charCodeAt(at)
-  return at + (code >= 0xD800 && code <= 0xDBFF ? 2 : 1)
-}
-
 interface ComposerLine { text: string; start: number; end: number }
 
 function wrapComposerLines(text: string, width: number): ComposerLine[] {
@@ -904,13 +1013,14 @@ function findComposerCursorLine(lines: ComposerLine[], cursor: number): number {
   return Math.max(0, lines.length - 1)
 }
 
-function StatusArea({ ready, sessionId, columns, webUrl, aimuxStatus, modelDisplay }: {
+function StatusArea({ ready, sessionId, columns, webUrl, aimuxStatus, modelDisplay, copyNotice }: {
   ready: ReadyState
   sessionId: string | null
   columns: number
   webUrl: string
   aimuxStatus?: AimuxStatus
   modelDisplay: string
+  copyNotice?: string | null
 }) {
   const model = modelDisplay
   const language = ready.prefs.language === 'en' ? 'English' : '中文'
@@ -926,7 +1036,7 @@ function StatusArea({ ready, sessionId, columns, webUrl, aimuxStatus, modelDispl
   return (
     <Box flexDirection="column" marginTop={1}>
       <Box justifyContent="space-between">
-        <Text dimColor>{left}</Text>
+        <Text dimColor color={copyNotice ? 'green' : undefined}>{copyNotice ?? left}</Text>
         {right ? <Text dimColor>{right}</Text> : null}
       </Box>
       {/* Merged connectivity row: AIMUX status sits left, the clickable web URL
@@ -996,35 +1106,8 @@ function clickableUrl(url: string, maxLen?: number): string {
   return `\u001B]8;;${url}\u0007${display}\u001B]8;;\u0007`
 }
 
-// Visible-column width (CJK / emoji / fullwidth count as 2; combining marks as
-// 0), used to size the AIMUX status block so the web URL truncates to exactly
-// the remaining width without overflowing the row.
-function displayWidth(str: string): number {
-  let w = 0
-  for (const ch of str) {
-    const code = ch.codePointAt(0) ?? 0
-    if (code >= 0x0300 && code <= 0x036F) continue // combining diacriticals: 0 cols
-    w += isWideCodepoint(code) ? 2 : 1
-  }
-  return w
-}
-
-function isWideCodepoint(code: number): boolean {
-  return (
-    (code >= 0x1100 && code <= 0x115F) || // Hangul Jamo
-    (code >= 0x2E80 && code <= 0x303E) || // CJK radicals / punctuation
-    (code >= 0x3041 && code <= 0x33FF) || // Hiragana / Katakana / CJK compat
-    (code >= 0x3400 && code <= 0x4DBF) || // CJK Unified Extension A
-    (code >= 0x4E00 && code <= 0x9FFF) || // CJK Unified Ideographs (心跳正常 …)
-    (code >= 0xA000 && code <= 0xA4CF) || // Yi
-    (code >= 0xAC00 && code <= 0xD7A3) || // Hangul syllables
-    (code >= 0xF900 && code <= 0xFAFF) || // CJK compatibility ideographs
-    (code >= 0xFE30 && code <= 0xFE4F) || // CJK compatibility forms
-    (code >= 0xFF00 && code <= 0xFF60) || // Fullwidth ASCII
-    (code >= 0xFFE0 && code <= 0xFFE6) || // Fullwidth signs
-    (code >= 0x1F300 && code <= 0x1FAFF)  // Emoji / symbols
-  )
-}
+// 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)

package/src/components/ConfigFlow.tsx

@@ -0,0 +1,120 @@
+/**
+ * /model (= /config) flow — pick a model, then create a brand-new session in the
+ * CURRENT task (Issue) with that model. Launched from inside the chat; Esc at any
+ * point before the session is created cancels back to the conversation untouched.
+ *
+ * The active Issue is intentionally NOT changed: /model only swaps the model and
+ * starts a fresh session, keeping the current project/task context. Esc-cancel is
+ * owned by ChatScreen (its useInput handles Esc while configOpen), so this
+ * component only ever reports a completed pick via onDone.
+ *
+ * Preferences are stored inside the current Issue (same model as PrepScreen):
+ *   updateIssuePreference — persist the chosen model on the active issue
+ * The session body mirrors useChat.ensureSession() so the pc_client_metadata
+ * (is_tui, aimux_id, local_path) matches lazily-created sessions exactly.
+ */
+import React, { useEffect, useRef, useState } from 'react'
+import { Box, Text } from 'ink'
+import { Select, Spinner } from './primitives.js'
+import { MobiusClient } from '../api.js'
+import { cwd, updateIssuePreference, type IssuePreference } from '../config.js'
+import { tuiAimuxIdentifier } from '../aimux.js'
+import type { Issue, SessionModelOption } from '../types.js'
+
+export interface ConfigResult {
+  issue: Issue
+  prefs: IssuePreference
+  sessionId: string
+}
+
+export function ConfigFlow({ client, issue, onDone }: {
+  client: MobiusClient
+  issue: Issue
+  onDone: (r: ConfigResult) => void
+}) {
+  const [step, setStep] = useState<'models' | 'creating'>('models')
+  const [models, setModels] = useState<SessionModelOption[] | null>(null)
+  const [defaultKey, setDefaultKey] = useState<string | null>(null)
+  const [status, setStatus] = useState('')
+  const doneRef = useRef(false)
+
+  // Guard against a setState after App has already remounted Chat (onDone fires
+  // a synchronous route change that unmounts us); also avoids double onDone.
+  useEffect(() => () => { doneRef.current = true }, [])
+
+  // Load the model list + default on mount (no issue step — the current Issue is used).
+  useEffect(() => {
+    Promise.all([
+      client.modelOptions().catch(() => [] as SessionModelOption[]),
+      client.defaultModel().then(r => r.model).catch(() => null),
+    ]).then(([opts, def]) => {
+      if (doneRef.current) return
+      setModels(opts)
+      setDefaultKey(def)
+    })
+  }, [client])
+
+  async function pickModel(model: string) {
+    setStep('creating')
+    try {
+      const prefs = await updateIssuePreference(cwd(), issue.id, { model })
+      if (doneRef.current) return
+      const s = await client.createSession(issue.id, {
+        name: `TUI ${new Date().toISOString().slice(5, 16).replace('T', ' ')}`,
+        model,
+        language: prefs.language,
+        excluded_skill_ids: prefs.excluded_skill_ids,
+        excluded_memory_ids: prefs.excluded_memory_ids,
+        pc_client_metadata: {
+          work_mode: 'pc',
+          aimux_id: tuiAimuxIdentifier(),
+          local_path: process.cwd(),
+          is_tui: true,
+          add_remote_aimux_mcp: true,
+        },
+      })
+      if (doneRef.current) return
+      onDone({ issue, prefs, sessionId: s.session_id })
+    } catch (e: any) {
+      if (doneRef.current) return
+      setStatus(`创建新会话失败: ${e?.message ?? e}`)
+      setStep('models')
+    }
+  }
+
+  if (step === 'creating') {
+    return (
+      <Box paddingX={2} paddingY={1}>
+        <Spinner label="正在创建新会话…" />
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text bold color="cyan">更换模型</Text>
+      <Text color="gray">当前任务: {issue.title}</Text>
+      {status ? <Text color="yellow">{status}</Text> : null}
+
+      <Box flexDirection="column">
+        <Text bold color="cyan">选择模型</Text>
+        <Text color="gray">确认后创建新会话（保留当前任务）</Text>
+        <Box marginTop={1}>
+          {models === null
+            ? <Text color="cyan">加载模型列表…</Text>
+            : models.length === 0
+              ? <Text color="gray">（无可用模型）</Text>
+              : <Select
+                  items={models.map(o => ({
+                    label: `${o.label}${o.key === defaultKey ? ' （默认）' : ''}`,
+                    value: o.key,
+                    desc: o.sub,
+                  }))}
+                  onSelect={key => void pickModel(key)}
+                />}
+        </Box>
+        <Text color="gray">↑↓ 选择 · 回车确认 · Esc 取消</Text>
+      </Box>
+    </Box>
+  )
+}