@mobius-os/mobius 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobius-os/mobius",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "description": "Mobius terminal client. Reuses Mobius frontend TypeScript types and jsonl entry shapes.",
   "bin": {

package/src/App.tsx

@@ -17,6 +17,7 @@ import { LoginScreen } from './components/Login.js'
 import { PrepScreen, type ReadyState } from './components/PrepScreen.js'
 import { ChatScreen } from './components/Chat.js'
 import { ResumePicker } from './components/ResumePicker.js'
+import { Screen } from './components/Screen.js'
 import { startAimuxConnection, stopAimuxConnection, type AimuxStatus } from './aimux.js'
 import { AimuxStatusLine } from './components/AimuxStatus.js'
 
@@ -117,29 +118,36 @@ export function App() {
   }
 
   // ── render ─────────────────────────────────────────────────────────────────
-  if (route === 'boot') {
-    return <Box paddingX={2} paddingY={1}><Text color="cyan">{bootMsg}</Text></Box>
-  }
-  if (route === 'login' || !client) {
-    return <LoginScreen onSuccess={onLoginSuccess} />
+  // The chat screen already pins itself to the terminal height, so render it
+  // bare — a <Screen> wrapper would clip its transcript in short terminals and
+  // in the non-TTY test harness. Every other route (login, the project/issue/
+  // session pickers) renders inside <Screen> so each frame is pinned to the
+  // terminal height and transitions stay free of stale-frame residue. See
+  // components/Screen.tsx.
+  if (route === 'chat' && ready && client) {
+    return (
+      <ChatScreen
+        key={chatKey}
+        client={client}
+        ready={ready}
+        webUserId={ready.project.created_by || userId || ready.issue.created_by || ''}
+        resumeSessionId={resumeSessionId}
+        onClear={onClear}
+        onResume={onResume}
+        onQuit={onQuit}
+        aimuxStatus={aimuxStatus}
+      />
+    )
   }
-  if (route === 'prep' || !ready) {
-    return <Box flexDirection="column"><AimuxStatusLine status={aimuxStatus} /><PrepScreen client={client} onReady={onPrepReady} onQuit={onQuit} /></Box>
-  }
-  if (route === 'resume') {
-    return <Box flexDirection="column"><AimuxStatusLine status={aimuxStatus} /><ResumePicker client={client} project={ready.project} onPick={onResumed} onBack={() => setRoute('chat')} /></Box>
+  let node: React.ReactNode
+  if (route === 'boot') {
+    node = <Box paddingX={2} paddingY={1}><Text color="cyan">{bootMsg}</Text></Box>
+  } else if (route === 'login' || !client) {
+    node = <LoginScreen onSuccess={onLoginSuccess} />
+  } else if (route === 'resume' && ready) {
+    node = <Box flexDirection="column"><AimuxStatusLine status={aimuxStatus} compact /><ResumePicker client={client} project={ready.project} onPick={onResumed} onBack={() => setRoute('chat')} /></Box>
+  } else {
+    node = <Box flexDirection="column"><AimuxStatusLine status={aimuxStatus} compact /><PrepScreen client={client} onReady={onPrepReady} onQuit={onQuit} /></Box>
   }
-  return (
-    <ChatScreen
-      key={chatKey}
-      client={client}
-      ready={ready}
-      webUserId={ready.project.created_by || userId || ready.issue.created_by || ''}
-      resumeSessionId={resumeSessionId}
-      onClear={onClear}
-      onResume={onResume}
-      onQuit={onQuit}
-      aimuxStatus={aimuxStatus}
-    />
-  )
+  return <Screen>{node}</Screen>
 }

package/src/components/Chat.tsx

@@ -35,7 +35,7 @@ interface TerminalSize {
   isTty: boolean
 }
 
-const VERSION = '0.2.4'
+const VERSION = '0.2.6'
 const WELCOME_ROWS = 12
 const CHROME_ROWS = 11
 
@@ -49,6 +49,7 @@ const SLASH_COMMANDS = [
 export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear, onResume, onQuit, aimuxStatus }: ChatProps) {
   const chat = useChat({ client, ready, resumeSessionId })
   const [showHelp, setShowHelp] = useState(false)
+  const [scrollBack, setScrollBack] = useState(0)
   const terminal = useTerminalSize()
 
   const runSlash = useCallback((raw: string) => {
@@ -70,19 +71,42 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
       return
     }
     setShowHelp(false)
+    setScrollBack(0)
     void chat.send(t)
   }, [chat, runSlash])
 
   const transcriptRows = Math.max(5, terminal.rows - CHROME_ROWS)
   const fitted = useMemo(
-    () => fitTranscript(chat.entries, transcriptRows, terminal.columns),
-    [chat.entries, transcriptRows, terminal.columns],
+    () => fitTranscript(chat.entries, transcriptRows, terminal.columns, scrollBack),
+    [chat.entries, transcriptRows, terminal.columns, scrollBack],
   )
   // Welcome card is for fresh / short sessions only. Once the conversation is
   // long enough that fitTranscript hides older entries, switch to the compact
   // header + full transcript — otherwise the 12-row welcome card crowds out the
   // recent messages and the chat area reads as blank after "已隐藏较早的…".
-  const showWelcome = fitted.hiddenCount === 0 && fitted.estimatedRows + WELCOME_ROWS <= transcriptRows
+  const showWelcome = fitted.hiddenOlder === 0 && scrollBack === 0 && fitted.estimatedRows + WELCOME_ROWS <= transcriptRows
+
+  // In-app history pager. Ink redraws only the live frame, so the terminal's
+  // own scrollback holds no past turns — older entries are unreachable unless we
+  // page through them here. PageUp/PageDown move the viewport back/forward over
+  // the transcript. While reading history (scrollBack > 0) we keep the view
+  // pinned as new entries stream in; sending a message (onSubmit above) snaps
+  // back to the latest so the conversation auto-follows again.
+  const prevLenRef = useRef(chat.entries.length)
+  useEffect(() => {
+    const prev = prevLenRef.current
+    const cur = chat.entries.length
+    prevLenRef.current = cur
+    if (cur > prev && scrollBack > 0) setScrollBack(s => s + (cur - prev))
+  }, [chat.entries.length, scrollBack])
+
+  useInput((_input, key) => {
+    // The composer ignores pageUp/pageDown, so binding them here can't clash
+    // with text entry, history navigation, or the slash-command popup.
+    const step = Math.max(1, fitted.entries.length)
+    if (key.pageUp) setScrollBack(s => Math.min(chat.entries.length, s + step))
+    else if (key.pageDown) setScrollBack(s => Math.max(0, s - step))
+  })
 
   return (
     <Box
@@ -97,14 +121,17 @@ export function ChatScreen({ client, ready, webUserId, resumeSessionId, onClear,
           ? <WelcomeCard ready={ready} columns={terminal.columns} resumed={Boolean(resumeSessionId)} />
           : <CompactHeader ready={ready} sessionId={chat.sessionId} />}
 
-        <Box flexDirection="column" marginTop={showWelcome ? 1 : 0}>
-          {fitted.hiddenCount > 0
-            ? <Text dimColor>  … 已隐藏较早的 {fitted.hiddenCount} 条记录；使用 /resume 可重新载入会话</Text>
+        <Box flexGrow={1} flexDirection="column" justifyContent={showWelcome ? 'flex-start' : 'flex-end'} overflowY="hidden">
+          {fitted.hiddenOlder > 0 || scrollBack > 0
+            ? <Text dimColor>  ↑ {fitted.hiddenOlder > 0 ? `还有 ${fitted.hiddenOlder} 条较早记录 · PageUp 向上翻页` : '已到最早记录 · PageDown 向下翻页'}</Text>
             : null}
           {fitted.entries.map((entry, index) => (
             <EntryBlock key={entry.__id ?? `entry-${index}`} entry={entry} />
           ))}
           {chat.pendingUser !== null ? <UserLine text={chat.pendingUser} /> : null}
+          {fitted.hiddenRecent > 0
+            ? <Text dimColor>  ↓ PageDown 向下翻页 · 较新 {fitted.hiddenRecent} 条</Text>
+            : null}
         </Box>
 
         {chat.entries.length === 0 && chat.pendingUser === null && !showHelp
@@ -506,18 +533,29 @@ function entryRows(entry: AnyEntry, columns: number): number {
   }, 0)
 }
 
-function fitTranscript(entries: AnyEntry[], rowBudget: number, columns: number): {
+function fitTranscript(entries: AnyEntry[], rowBudget: number, columns: number, scrollBack = 0): {
   entries: AnyEntry[]
-  hiddenCount: number
+  hiddenOlder: number
+  hiddenRecent: number
   estimatedRows: number
 } {
+  // `scrollBack` = how many of the most-recent entries are paged out of view
+  // below the viewport (the user pressed PageUp). The visible window is then
+  // fit from the tail of what remains, backward, until the row budget is full.
+  const tail = Math.max(0, entries.length - scrollBack)
+  const avail = tail === 0 ? [] : entries.slice(0, tail)
   let rows = 0
-  let first = entries.length
-  for (let index = entries.length - 1; index >= 0; index--) {
-    const nextRows = entryRows(entries[index], columns)
-    if (first < entries.length && rows + nextRows > rowBudget) break
+  let first = avail.length
+  for (let index = avail.length - 1; index >= 0; index--) {
+    const nextRows = entryRows(avail[index], columns)
+    if (first < avail.length && rows + nextRows > rowBudget) break
     rows += nextRows
     first = index
   }
-  return { entries: entries.slice(first), hiddenCount: first, estimatedRows: rows }
+  return {
+    entries: avail.slice(first),
+    hiddenOlder: first,                       // entries older than the viewport
+    hiddenRecent: entries.length - tail,      // == scrollBack: entries newer than the viewport
+    estimatedRows: rows,
+  }
 }

package/src/components/Screen.tsx

@@ -0,0 +1,35 @@
+/**
+ * Screen — the full-terminal root every route renders into.
+ *
+ * Why this exists: Ink renders inline in the terminal and, on each render,
+ * erases only as many lines as the PREVIOUS frame occupied. If a frame is ever
+ * taller than the terminal window it scrolls, Ink can no longer move the cursor
+ * back to the real top of that frame, and stale lines from the old screen stay
+ * on screen as "residue" (most visible when a tall picker — project / issue /
+ * session list — gives way to a shorter one). Pinning the root to exactly the
+ * terminal height with `overflow="hidden"` makes every frame the same height,
+ * so Ink's erase always realigns and transitions stay clean.
+ *
+ * Pickers below still budget their own height (Select `reserveRows`) so nothing
+ * meaningful gets clipped; this box is the hard guarantee that nothing scrolls.
+ */
+import React, { useCallback, useEffect, useState } from 'react'
+import { Box, useStdout } from 'ink'
+
+export function Screen({ children }: { children: React.ReactNode }) {
+  const { stdout } = useStdout()
+  const read = useCallback(() => Math.max(8, stdout.rows ?? 24), [stdout])
+  const [rows, setRows] = useState(read)
+
+  useEffect(() => {
+    const onResize = () => setRows(read())
+    stdout.on('resize', onResize)
+    return () => { stdout.off('resize', onResize) }
+  }, [stdout, read])
+
+  return (
+    <Box height={rows} flexDirection="column" overflow="hidden">
+      {children}
+    </Box>
+  )
+}

package/src/components/primitives.tsx

@@ -180,11 +180,14 @@ export function Select(props: SelectProps) {
 
   // viewport: keep the active item on screen. Without this a long list renders
   // every row and pushes the lower items (and the rest of the UI) past the
-  // terminal bottom. We render a sliding window around `active` plus a
-  // "↑/↓ 还有 N 项" hint for the hidden tails.
+  // terminal bottom, which scrolls Ink's frame and leaves on-screen residue.
+  // We render a sliding window around `active` plus a "↑/↓ 还有 N 项" hint for
+  // the hidden tails. Reserve generously (13): the window items plus the two
+  // scroll hints, the active item's desc line, the AIMUX status line, and the
+  // picker's own header/footer/padding must all fit within `rows`.
   const total = items.length
   const rows = stdout?.rows ?? 24
-  const maxVisible = props.maxVisible ?? Math.max(3, rows - 8)
+  const maxVisible = props.maxVisible ?? Math.max(3, rows - 13)
   let start = 0
   if (total > maxVisible) {
     const half = Math.floor(maxVisible / 2)