@mobius-os/mobius 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobius-os/mobius",
-  "version": "0.2.3",
+  "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.1'
+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)

package/src/hooks/useChat.ts

@@ -118,13 +118,30 @@ export function useChat({ client, ready, resumeSessionId }: ChatApi): ChatContro
   const appendEntries = useCallback((newOnes: AnyEntry[]) => {
     if (!newOnes.length) return
     setEntries(prev => {
-      const stamped = newOnes.map(e => ({ ...e, __id: e.__id ?? nextId() }))
-      return [...prev, ...stamped]
+      // De-duplicate by uuid so a live jsonl_entry that also appears in a
+      // reconnect's history replay is never shown twice.
+      const seen = new Set<string>()
+      for (const e of prev) { const k = entryKey(e); if (k) seen.add(k) }
+      const stamped: AnyEntry[] = []
+      for (const e of newOnes) {
+        const k = entryKey(e)
+        if (k && seen.has(k)) continue
+        if (k) seen.add(k)
+        stamped.push({ ...e, __id: e.__id ?? nextId() })
+      }
+      return stamped.length ? [...prev, ...stamped] : prev
     })
   }, [])
 
   const setHistory = useCallback((list: AnyEntry[]) => {
-    setEntries(list.map(e => ({ ...e, __id: e.__id ?? nextId() })))
+    const seen = new Set<string>()
+    const out: AnyEntry[] = []
+    for (const e of list) {
+      const k = entryKey(e)
+      if (k) { if (seen.has(k)) continue; seen.add(k) }
+      out.push({ ...e, __id: e.__id ?? nextId() })
+    }
+    setEntries(out)
   }, [])
 
   // ── SSE connection ────────────────────────────────────────────────────────
@@ -136,6 +153,14 @@ export function useChat({ client, ready, resumeSessionId }: ChatApi): ChatContro
     const conn = new SseConnection(url, {
       onHistoryEntries: (es, _done) => {
         if (es.length) setHistory(es)
+        // A reconnect replays the session tail. If our optimistic placeholder is
+        // now backed by its real entry, retire it so the user's input isn't shown
+        // twice (once as the entry, once as the placeholder). The live jsonl_entry
+        // path already clears pendingUser, but a dropped SSE stream (reverse-proxy
+        // idle timeout) can deliver the message only via this history replay — and
+        // if the whole turn finished while disconnected, no live entry ever comes
+        // to clear it, leaving the duplication on screen until the next send.
+        setPendingUser(prev => (prev !== null && es.some(e => entryMatchesPendingUser(e, prev)) ? null : prev))
       },
       onEntry: (entry) => {
         if (process.env.MOBIUS_TUI_DEBUG) console.error('[onEntry]', entry?.type, (entry?.message?.content?.[0]?.text ?? '').slice(0, 40))
@@ -317,7 +342,10 @@ export function useChat({ client, ready, resumeSessionId }: ChatApi): ChatContro
 
   const send = useCallback(async (text: string) => {
     const body = text.trim()
-    if (!body || sending) return
+    // Guard on the ref (synchronous truth) as well as the state so a stale
+    // closure can't dispatch the same message twice (two distinct reqIds → two
+    // user entries on the server).
+    if (!body || sending || sendingRef.current) return
     setError(null)
     setPendingUser(body)
     statusEpochRef.current += 1