@nanhara/hara 0.101.0 → 0.101.1

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to `@nanhara/hara`.
 > Versioning (pre-1.0, SemVer-style): the **minor** (middle) number bumps for a **new feature**; the
 > **patch** (last) number bumps for **optimizations/fixes of existing features**.
 
+## 0.101.1 — the input box stops running to the top
+
+- **Live-region overflow guard.** A long streaming answer (or a big diff) used to grow the live region
+  past the terminal height — at which point ink's in-place repaint breaks and the input box "runs to
+  the top of the screen". Live blocks now render a bounded tail window (sized to your terminal, elided
+  lines counted in a dim header); the FULL text lands in scrollback the moment the block finalizes,
+  and ctrl+t shows it live. Same treatment reasoning got in 0.99.2, now for answers and diffs — the
+  dynamic region can no longer outgrow the viewport, which is the invariant that kept codex stable
+  (line-level commits) and pushed Claude Code to a fullscreen ScrollBox.
+
 ## 0.101.0 — startup update check
 
 - **`hara` tells you when it's out of date.** On launch (interactive TTY only), a one-line notice —

package/dist/tui/App.js

@@ -43,12 +43,33 @@ const MODE_SELECTOR_MS = 2500;
 // Memoized: a live block only re-renders when its own `item` (a fresh object when its text grows) or
 // `open` changes. So a spinner tick or an unrelated flush doesn't re-run `renderMarkdown` for every
 // live block, and non-tail live blocks stay put while only the streaming tail grows.
-const Block = memo(function Block({ item, open }) {
+/** Tail-window a LIVE block's rendered lines so the dynamic region can never outgrow the terminal.
+ *  ink repaints the whole dynamic region in place; once it's taller than the viewport the erase math
+ *  breaks and the input box "runs to the top of the screen". Bounding the live view fixes the class:
+ *  earlier lines are elided with a dim counter, and the FULL text lands in scrollback the moment the
+ *  block finalizes (nothing is lost — ctrl+t shows it live too). `maxRows` comes from the terminal. */
+function tailWindow(rendered, maxRows) {
+    const lines = rendered.replace(/\n+$/, "").split("\n");
+    if (lines.length <= maxRows)
+        return { header: null, body: rendered };
+    return {
+        header: `… +${lines.length - maxRows} earlier lines — full text lands above when this block finishes · ctrl+t to view now`,
+        body: lines.slice(-maxRows).join("\n"),
+    };
+}
+const Block = memo(function Block({ item, open, liveRows }) {
+    // Live streaming blocks get a bounded tail view (liveRows set); committed <Static> blocks render full.
+    const windowed = (rendered) => {
+        if (!liveRows)
+            return _jsx(Text, { children: rendered });
+        const w = tailWindow(rendered, liveRows);
+        return (_jsxs(Box, { flexDirection: "column", children: [w.header ? _jsx(Text, { dimColor: true, children: w.header }) : null, _jsx(Text, { children: w.body })] }));
+    };
     switch (item.kind) {
         case "user":
             return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: "\u203A " }), _jsx(Text, { children: item.text })] }));
         case "assistant":
-            return _jsx(Text, { children: renderMarkdown(item.text) }); // headers/bold/inline-code/bullets + verbatim fences
+            return windowed(renderMarkdown(item.text)); // headers/bold/inline-code/bullets + verbatim fences
         case "reasoning": {
             // A streaming reasoning block lives in the dynamic region ABOVE the input box, and the instant the
             // model stops thinking it FOLDS to a single "✻ thought · N lines" notice in scrollback. If we streamed
@@ -66,7 +87,7 @@ const Block = memo(function Block({ item, open }) {
         case "tool":
             return _jsx(Text, { dimColor: true, children: "  " + item.text });
         case "diff":
-            return _jsx(Text, { children: item.text });
+            return windowed(item.text); // a big diff must not blow the live region either
         case "notice":
             return _jsx(Text, { dimColor: true, children: item.text });
     }
@@ -301,6 +322,11 @@ const TodoPanel = memo(function TodoPanel({ todos }) {
 });
 export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval, onClipboardImage, vim, visionNotice }) {
     const { exit } = useApp();
+    const { stdout: termOut } = useStdout();
+    // Live tail budget: terminal rows minus the rest of the dynamic chrome (todo panel ≤10, status slot,
+    // input box + footer, margins). Keeps the WHOLE dynamic region under the viewport — the invariant that
+    // stops ink's repaint from "running to the top" when a long answer/diff streams. Floor 8 for tiny panes.
+    const liveRows = Math.max(8, (termOut?.rows ?? 30) - 20);
     const [history, setHistory] = useState([]);
     const [current, setCurrent] = useState([]);
     const [working, setWorking] = useState(false);
@@ -587,5 +613,5 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
     });
     if (showTranscript)
         return _jsx(Transcript, { items: [...history, ...current], onClose: () => setShowTranscript(false) });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: header ? [{ id: -1, kind: "notice", text: "" }, ...history] : history, children: (item) => (item.id === -1 ? _jsx(HeaderCard, { ...header }, "hdr") : _jsx(Block, { item: item }, item.id)) }), current.map((item) => (_jsx(Block, { item: item, open: reasoningOpen }, item.id))), _jsx(TodoPanel, { todos: todos }), prompt && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: `  ${stripAnsi(prompt.title)}` }), prompt.options.map((o, i) => (_jsx(Text, { color: i === promptSel ? "cyan" : undefined, bold: i === promptSel, children: (i === promptSel ? " ❯ " : "   ") + `${i + 1}. ` + o.label }, i))), _jsx(Text, { dimColor: true, children: `   ↑↓ or 1–${prompt.options.length} to choose · Enter · Esc cancels` })] })), askText && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: `  ? ${stripAnsi(askText.title)}` }), _jsx(Text, { dimColor: true, children: "   type your answer below · Enter to send · Esc cancels" })] })), pool.length > 0 && !prompt && !askText && (_jsx(Box, { flexDirection: "column", children: pool.map((l, i) => (_jsx(Text, { color: accent(), children: `  › ${l.length > 72 ? l.slice(0, 72) + "…" : l}` }, i))) })), modeSelector ? _jsx(ModeLine, { approval: status.approval }) : _jsx(StatusRow, { working: working, todos: todos, queued: pool.length }), _jsx(InputBox, { status: status, cwd: cwd, model: model, route: header?.routeHost, isActive: !prompt, vim: vim, onSubmit: handleSubmit, onClipboardImage: onClipboardImage })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: header ? [{ id: -1, kind: "notice", text: "" }, ...history] : history, children: (item) => (item.id === -1 ? _jsx(HeaderCard, { ...header }, "hdr") : _jsx(Block, { item: item }, item.id)) }), current.map((item) => (_jsx(Block, { item: item, open: reasoningOpen, liveRows: liveRows }, item.id))), _jsx(TodoPanel, { todos: todos }), prompt && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: `  ${stripAnsi(prompt.title)}` }), prompt.options.map((o, i) => (_jsx(Text, { color: i === promptSel ? "cyan" : undefined, bold: i === promptSel, children: (i === promptSel ? " ❯ " : "   ") + `${i + 1}. ` + o.label }, i))), _jsx(Text, { dimColor: true, children: `   ↑↓ or 1–${prompt.options.length} to choose · Enter · Esc cancels` })] })), askText && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: `  ? ${stripAnsi(askText.title)}` }), _jsx(Text, { dimColor: true, children: "   type your answer below · Enter to send · Esc cancels" })] })), pool.length > 0 && !prompt && !askText && (_jsx(Box, { flexDirection: "column", children: pool.map((l, i) => (_jsx(Text, { color: accent(), children: `  › ${l.length > 72 ? l.slice(0, 72) + "…" : l}` }, i))) })), modeSelector ? _jsx(ModeLine, { approval: status.approval }) : _jsx(StatusRow, { working: working, todos: todos, queued: pool.length }), _jsx(InputBox, { status: status, cwd: cwd, model: model, route: header?.routeHost, isActive: !prompt, vim: vim, onSubmit: handleSubmit, onClipboardImage: onClipboardImage })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanhara/hara",
-  "version": "0.101.0",
+  "version": "0.101.1",
   "description": "hara — a coding agent CLI that runs like an engineering org.",
   "bin": {
     "hara": "dist/index.js"