@mobius-os/mobius 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobius-os/mobius",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "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.5'
 const WELCOME_ROWS = 12
 const CHROME_ROWS = 11
 

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)