@nanhara/hara 0.98.1 → 0.98.3

package/dist/index.js

@@ -3118,7 +3118,11 @@ program.action(async (opts) => {
                 await maybeAutoCompact(provider, history, meta, stats, cfg, (m) => h.sink.notice(m));
             },
         });
-        out("\n" + c.dim("Session ") + c.bold(shortId(meta.id)) + c.dim(" saved · resume:  ") + c.cyan(`hara resume ${shortId(meta.id)}`) + "\n");
+        // Only claim "saved · resume" if a turn actually persisted the session. A zero-turn session (opened,
+        // then exited without submitting anything) is never written by saveSession — so printing the resume
+        // hint would mislead and `hara resume <id>` would fail with "no session matching".
+        if (loadSession(meta.id))
+            out("\n" + c.dim("Session ") + c.bold(shortId(meta.id)) + c.dim(" saved · resume:  ") + c.cyan(`hara resume ${shortId(meta.id)}`) + "\n");
         await closeMcp();
         process.exit(0); // TUI done — exit cleanly (ink can leave stdin referenced)
     }

package/dist/tui/App.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The agent machinery is injected via `onSubmit` (a turn runner) so this view is testable with
 // ink-testing-library against a fake runner — no provider/network needed.
 import { Box, Static, Text, useApp, useInput, useStdout } from "ink";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { InputBox } from "./InputBox.js";
 import { activity } from "../activity.js";
 import { ctxPctFor } from "../statusbar.js";
@@ -34,7 +34,10 @@ function foldForHistory(it) {
  *  block on every token, which over a laggy link leaves stale duplicate lines + jitter. 33ms clamps
  *  the live re-render rate while state itself stays exact (nothing is dropped, only coalesced). */
 const LIVE_FRAME_MS = 33;
-function Block({ item, open }) {
+// 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 }) {
     switch (item.kind) {
         case "user":
             return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: "\u203A " }), _jsx(Text, { children: item.text })] }));
@@ -58,7 +61,7 @@ function Block({ item, open }) {
         case "notice":
             return _jsx(Text, { dimColor: true, children: item.text });
     }
-}
+});
 function flattenTranscript(items) {
     const out = [];
     for (const it of items) {
@@ -183,21 +186,33 @@ export function spinnerVerb(list, elapsedSec) {
     }
     return `working ${elapsedSec}s · esc to interrupt`;
 }
+// The spinner is the only element that animates continuously while a turn runs — and because ink
+// redraws the WHOLE dynamic region (input box + mode bar included) on any change, its tick rate sets
+// a floor on full-frame redraws over the life of a turn. At ~8fps (125ms) the braille glyph still
+// reads as smooth motion but cuts those forced redraws ~20% vs 100ms — meaningfully calmer over a
+// slow/remote link. Elapsed seconds come from a wall-clock start, so the "Ns" text stays exact and
+// stable (it only changes once per second, not coupled to the glyph frame).
+const SPINNER_FRAME_MS = 125;
 function Working({ todos }) {
-    const [n, setN] = useState(0);
+    const [frame, setFrame] = useState(0);
+    const startRef = useRef(Date.now());
     useEffect(() => {
-        const id = setInterval(() => setN((x) => x + 1), 100);
+        startRef.current = Date.now();
+        const id = setInterval(() => setFrame((x) => x + 1), SPINNER_FRAME_MS);
         return () => clearInterval(id);
     }, []);
     const frames = "⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏";
-    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: frames[n % frames.length] }), _jsx(Text, { dimColor: true, children: ` ${spinnerVerb(todos, Math.floor(n / 10))}` })] }));
+    const elapsedSec = Math.floor((Date.now() - startRef.current) / 1000);
+    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: frames[frame % frames.length] }), _jsx(Text, { dimColor: true, children: ` ${spinnerVerb(todos, elapsedSec)}` })] }));
 }
 // Live task panel: renders the current todo_write checklist between the in-progress turn output
 // and the input box. Highlights the in_progress item; caps at 8 rows and folds the rest into
 // `… +N pending/done`. Hidden when the list is empty.
 const PANEL_MAX_ROWS = 8;
 const TODO_MARK = { pending: "☐", in_progress: "▶", done: "☑" };
-function TodoPanel({ todos }) {
+// Memoized on the `todos` array reference (stable between todo_write updates), so spinner ticks and
+// streaming flushes don't re-run the sort/slice every frame.
+const TodoPanel = memo(function TodoPanel({ todos }) {
     if (!todos.length)
         return null;
     const doneCount = todos.filter((t) => t.status === "done").length;
@@ -224,7 +239,7 @@ function TodoPanel({ todos }) {
                 const done = t.status === "done";
                 return (_jsx(Text, { color: inProg ? accent() : undefined, bold: inProg, dimColor: done, children: `  ${TODO_MARK[t.status]} ${t.text}` }, i));
             }), hiddenSummary ? _jsx(Text, { dimColor: true, children: hiddenSummary }) : null] }));
-}
+});
 export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval, onClipboardImage, vim, visionNotice }) {
     const { exit } = useApp();
     const [history, setHistory] = useState([]);

package/dist/tui/InputBox.js

@@ -3,26 +3,39 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // prompt line in the middle, and a bottom border carrying the approval modes + token usage +
 // concurrency. Composed from <Text> rows (no ink border fork needed) so the title sits exactly
 // where we want it. Pure-ish: pass `width` to make rendering deterministic in tests.
+//
+// Render-stability principles (codex-style, for slow/remote terminals): ink erases and rewrites the
+// ENTIRE dynamic region on every frame, so the box's cost scales with (a) how many lines it occupies
+// and (b) how often any of them change. Two levers here:
+//   1. The static chrome (borders, mode bar, mention popup) is memoized so a keystroke that only
+//      changes the prompt text doesn't force React to reconcile the unchanged rows.
+//   2. Line-wrapping + cursor are computed deterministically from (value, cursor, width) in one memo,
+//      so long input wraps under a stable continuation indent and the cursor never drifts — instead
+//      of leaning on ink's soft-wrap of a single <Text>, which mis-aligns wrapped rows against the
+//      "› " prompt gutter and reflows unpredictably as you type.
 import { Box, Text, useInput, useStdout } from "ink";
-import { useMemo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { fileCandidates } from "../context/mentions.js";
 import { imagePathFromPaste } from "../images.js";
 import { vimNormal } from "./vim.js";
 export const MODES = ["suggest", "auto-edit", "full-auto", "plan"];
 export const nextMode = (m) => MODES[(MODES.indexOf(m) + 1) % MODES.length];
 const tok = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : `${n}`);
-function TopBorder({ name, width }) {
+// The prompt gutter ("› " / "◆ ") is 2 cells wide; wrapped continuation lines indent by the same
+// amount so the text column is stable across visual rows.
+const GUTTER = 2;
+const TopBorder = memo(function TopBorder({ name, width }) {
     const labelLen = name.length + 2; // "⏺ " + name
     const left = Math.max(2, width - labelLen - 3);
     return (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ["─".repeat(left), " "] }), _jsx(Text, { color: "cyan", children: "\u23FA" }), _jsxs(Text, { bold: true, children: [" ", name] }), _jsx(Text, { dimColor: true, children: " \u2500" })] }));
-}
+});
 // Bottom border carries token usage + concurrency at the right corner (modes moved to ModeBar below).
-function BottomBorder({ s, width }) {
+const BottomBorder = memo(function BottomBorder({ s, width }) {
     const usage = `↑${tok(s.input)} ↓${tok(s.output)}${s.ctxPct > 0 ? ` · ctx ${s.ctxPct}%` : ""}`;
     const label = s.agents > 0 ? `${usage} · ⛁${s.agents}` : `${usage} · ⛁ idle`;
     const left = Math.max(2, width - label.length - 3);
     return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: `${"─".repeat(left)} ${label} ─` }) }));
-}
+});
 const MODE_DESC = {
     suggest: "confirms edits & commands",
     "auto-edit": "auto-applies edits · asks before commands",
@@ -31,23 +44,22 @@ const MODE_DESC = {
 };
 // Prominent approval-mode selector below the box: all three listed, the active one highlighted (red
 // for the dangerous full-auto) with a one-line description and the shift+tab hint.
-function ModeBar({ approval }) {
+const ModeBar = memo(function ModeBar({ approval }) {
     const warn = approval === "full-auto";
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: MODES.map((m, i) => (_jsxs(Text, { children: [i > 0 ? "   " : "  ", m === approval ? _jsx(Text, { color: warn ? "red" : m === "plan" ? "cyan" : "green", bold: true, children: `◆ ${m}` }) : _jsx(Text, { dimColor: true, children: m })] }, m))) }), _jsx(Text, { dimColor: true, children: `    ${MODE_DESC[approval]} · shift+tab ⇄` })] }));
-}
+});
 /** The active `@mention` token immediately left of the cursor (for the file popup), or null. */
 function activeMention(value, cursor) {
     const m = /(?:^|\s)@([^\s@]*)$/.exec(value.slice(0, cursor));
     return m ? { query: m[1], start: cursor - m[1].length } : null;
 }
 // Dropdown of fuzzy @path matches, shown above the input as you type `@…` (codex / Claude-Code style).
-function MentionPopup({ items, selected, query }) {
+const MentionPopup = memo(function MentionPopup({ items, selected, query }) {
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: `  @${query}  ·  ${items.length} match${items.length === 1 ? "" : "es"} — ↑↓ select · Tab/Enter insert · Esc dismiss` }), items.map((it, i) => (_jsxs(Text, { children: [i === selected ? _jsx(Text, { color: "cyan", children: "  ▸ " }) : _jsx(Text, { children: "    " }), _jsx(Text, { color: it.endsWith("/") ? "blue" : undefined, dimColor: i !== selected, bold: i === selected, children: it })] }, it)))] }));
-}
+});
 const TOKEN_RE = /\[Image #\d+\]/g;
-/** Render the prompt line: plain text + the cursor, with any `[Image #N]` attachment tokens highlighted
- *  (codex / Claude-Code style — the image lives inline in the text, visibly distinct from what you typed). */
-function InputLine({ value, cursor }) {
+/** Split the value into text/image-token segments (image tokens render highlighted, codex-style). */
+function segmentize(value) {
     const parts = [];
     let last = 0;
     let m;
@@ -60,30 +72,131 @@ function InputLine({ value, cursor }) {
     }
     if (last < value.length)
         parts.push({ text: value.slice(last), token: false });
+    return parts;
+}
+/** Wrap `value` into rows that each fit within `cols` cells, breaking on spaces where possible but
+ *  never inside an `[Image #N]` token. Deterministic (no reliance on ink's soft-wrap) so wrapped rows
+ *  align under a stable gutter and the cursor position is exact. Always returns at least one row. */
+export function wrapRows(value, cols) {
+    const width = Math.max(1, cols);
+    const rows = [];
+    const parts = segmentize(value);
+    // Flatten to atomic units: a run of text is breakable per-char/word; an image token is atomic.
+    const atoms = [];
+    let pos = 0;
+    for (const p of parts) {
+        if (p.token) {
+            atoms.push({ text: p.text, start: pos, atomic: true });
+            pos += p.text.length;
+        }
+        else {
+            // Break the text run into word chunks (keep trailing space with the word) so wraps land on spaces.
+            const re = /\S+\s*|\s+/g;
+            let m;
+            let base = pos;
+            while ((m = re.exec(p.text))) {
+                atoms.push({ text: m[0], start: base + m.index, atomic: false });
+            }
+            pos += p.text.length;
+        }
+    }
+    if (atoms.length === 0)
+        return [{ start: 0, end: value.length }];
+    let rowStart = 0;
+    let col = 0;
+    const flush = (end) => {
+        rows.push({ start: rowStart, end });
+        rowStart = end;
+        col = 0;
+    };
+    for (const a of atoms) {
+        const aEnd = a.start + a.text.length;
+        if (a.atomic || a.text.length <= width) {
+            // A whole unit (image token OR a word chunk that fits within a full row): if it doesn't fit in
+            // the remaining room and the row already has content, wrap to a fresh row FIRST — never split it.
+            if (a.text.length > width - col && col > 0)
+                flush(a.start);
+            col += a.text.length; // an oversized atomic token may exceed width — acceptable (rare, kept whole)
+            if (col >= width)
+                flush(aEnd);
+        }
+        else {
+            // A single word longer than the whole width: hard-break it across rows.
+            let s = a.start;
+            if (col > 0)
+                flush(s); // start the long word on a fresh row
+            while (s < aEnd) {
+                const room = width - col;
+                const take = Math.min(room, aEnd - s);
+                col += take;
+                s += take;
+                if (col >= width)
+                    flush(s);
+            }
+        }
+    }
+    // Flush the tail. If content exactly filled the last flushed row (rowStart === value.length), we add
+    // an EMPTY trailing row so an end-of-line cursor doesn't overflow the full row (would wrap oddly).
+    if (rowStart < value.length) {
+        rows.push({ start: rowStart, end: value.length });
+    }
+    else if (rows.length === 0) {
+        rows.push({ start: 0, end: value.length }); // whole value fit on one (un-flushed) row
+    }
+    else if (rowStart === value.length && col === 0) {
+        rows.push({ start: value.length, end: value.length }); // exactly-full last row → empty tail for the cursor
+    }
+    return rows;
+}
+/** Render a single visual row of the prompt: text + highlighted image tokens, drawing the block
+ *  cursor (inverse cell) when it falls on this row. Splitting happens on precomputed rows so the
+ *  whole prompt never reflows as a single <Text> — stable under wrapping and quick to diff. */
+function renderRow(value, row, cursor, showCursor, isLastRow, keyPrefix) {
     const seg = (token, text, k) => token ? (_jsx(Text, { backgroundColor: "magenta", color: "white", children: text }, k)) : (_jsx(Text, { children: text }, k));
+    // Segments intersected with this row's [start,end) range.
+    const parts = segmentize(value);
     const nodes = [];
-    let pos = 0;
     let ki = 0;
+    let pos = 0;
+    const cursorOnRow = showCursor && cursor >= row.start && cursor < row.end;
     for (const p of parts) {
-        const start = pos;
-        const end = pos + p.text.length;
-        if (cursor >= start && cursor < end) {
-            const rel = cursor - start;
+        const pStart = pos;
+        const pEnd = pos + p.text.length;
+        pos = pEnd;
+        const from = Math.max(pStart, row.start);
+        const to = Math.min(pEnd, row.end);
+        if (from >= to)
+            continue; // segment not on this row
+        const slice = p.text.slice(from - pStart, to - pStart);
+        if (cursorOnRow && cursor >= from && cursor < to) {
+            const rel = cursor - from;
             if (rel > 0)
-                nodes.push(seg(p.token, p.text.slice(0, rel), `s${ki++}`));
-            nodes.push(_jsx(Text, { inverse: true, children: p.text[rel] }, `c${ki++}`));
-            if (rel + 1 < p.text.length)
-                nodes.push(seg(p.token, p.text.slice(rel + 1), `e${ki++}`));
+                nodes.push(seg(p.token, slice.slice(0, rel), `${keyPrefix}s${ki++}`));
+            nodes.push(_jsx(Text, { inverse: true, children: slice[rel] }, `${keyPrefix}c${ki++}`));
+            if (rel + 1 < slice.length)
+                nodes.push(seg(p.token, slice.slice(rel + 1), `${keyPrefix}e${ki++}`));
         }
         else {
-            nodes.push(seg(p.token, p.text, `p${ki++}`));
+            nodes.push(seg(p.token, slice, `${keyPrefix}p${ki++}`));
         }
-        pos = end;
     }
-    if (cursor >= value.length)
-        nodes.push(_jsx(Text, { inverse: true, children: " " }, "end"));
-    return _jsx(Text, { children: nodes });
+    // End-of-value cursor: a trailing inverse space, only ever on the LAST row (so it's drawn once).
+    if (showCursor && isLastRow && cursor >= value.length && cursor >= row.start) {
+        nodes.push(_jsx(Text, { inverse: true, children: " " }, `${keyPrefix}end`));
+    }
+    return nodes;
 }
+/** The prompt: gutter + wrapped input rows (or a placeholder when empty). Each wrapped continuation
+ *  row is indented under the gutter so the text column is stable. Memoized so it only re-renders when
+ *  the value/cursor/width/gutter actually change (not when unrelated status ticks over). */
+const InputLine = memo(function InputLine({ value, cursor, width, gutter, gutterColor, placeholder, }) {
+    const cols = Math.max(1, width - GUTTER); // text column width (after the 2-cell gutter)
+    const rows = useMemo(() => (value.length ? wrapRows(value, cols) : [{ start: 0, end: 0 }]), [value, cols]);
+    if (value.length === 0) {
+        return (_jsxs(Box, { children: [_jsx(Text, { color: gutterColor, children: gutter }), _jsxs(Text, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { dimColor: true, children: placeholder })] })] }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: rows.map((row, i) => (_jsxs(Box, { children: [_jsx(Text, { color: gutterColor, children: i === 0 ? gutter : "  " }), _jsx(Text, { children: renderRow(value, row, cursor, true, i === rows.length - 1, `r${i}_`) })] }, i))) }));
+});
 /** Top border (session) + prompt line + bottom border (usage) + ModeBar, with an @path popup. */
 export function InputBox({ status, cwd, width, onSubmit, onClipboardImage, isActive = true, working = false, queued = 0, vim = false, placeholder = "Type a task · /help · @file · Ctrl+V paste image · shift+tab mode · Esc interrupts", }) {
     const { stdout } = useStdout();
@@ -124,7 +237,10 @@ export function InputBox({ status, cwd, width, onSubmit, onClipboardImage, isAct
         setPending("");
     };
     const mention = activeMention(value, cursor);
-    const candidates = useMemo(() => (isActive && mention && !dismissed ? fileCandidates(cwd, mention.query, 8) : []), [cwd, isActive, dismissed, mention?.query, mention?.start]);
+    // FS scan only when the mention QUERY changes — not on every cursor move / unrelated keystroke.
+    // (`mention.start` moves whenever the cursor does; keying off it re-scanned the disk needlessly.)
+    const mentionQuery = isActive && mention && !dismissed ? mention.query : null;
+    const candidates = useMemo(() => (mentionQuery !== null ? fileCandidates(cwd, mentionQuery, 8) : []), [cwd, mentionQuery]);
     const popupOpen = candidates.length > 0;
     const selIdx = popupOpen ? Math.min(sel, candidates.length - 1) : 0;
     const complete = (cand) => {
@@ -238,5 +354,7 @@ export function InputBox({ status, cwd, width, onSubmit, onClipboardImage, isAct
             set(value.slice(0, cursor) + input + value.slice(cursor), cursor + input.length);
         }
     }, { isActive });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBorder, { name: status.sessionName || "session", width: w }), _jsxs(Box, { children: [_jsx(Text, { color: vim ? (mode === "normal" ? "yellow" : "green") : "cyan", children: vim && mode === "normal" ? "◆ " : "› " }), value.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { dimColor: true, children: placeholder })] })) : (_jsx(InputLine, { value: value, cursor: cursor }))] }), vim ? _jsx(Text, { dimColor: true, children: mode === "normal" ? "  -- NORMAL --  i/a insert · h l 0 $ w b e move · x dd D cw p edit" : "  -- INSERT --  Esc → normal" }) : null, _jsx(BottomBorder, { s: status, width: w }), working ? _jsx(Text, { dimColor: true, children: `  ⌨ working — Enter queues your message${queued ? ` · ${queued} queued` : ""} · Esc interrupts` }) : null, popupOpen ? _jsx(MentionPopup, { items: candidates, selected: selIdx, query: mention.query }) : null, _jsx(ModeBar, { approval: status.approval })] }));
+    const gutter = vim && mode === "normal" ? "◆ " : "› ";
+    const gutterColor = vim ? (mode === "normal" ? "yellow" : "green") : "cyan";
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBorder, { name: status.sessionName || "session", width: w }), _jsx(InputLine, { value: value, cursor: cursor, width: w, gutter: gutter, gutterColor: gutterColor, placeholder: placeholder }), vim ? _jsx(Text, { dimColor: true, children: mode === "normal" ? "  -- NORMAL --  i/a insert · h l 0 $ w b e move · x dd D cw p edit" : "  -- INSERT --  Esc → normal" }) : null, _jsx(BottomBorder, { s: status, width: w }), working ? _jsx(Text, { dimColor: true, children: `  ⌨ working — Enter queues your message${queued ? ` · ${queued} queued` : ""} · Esc interrupts` }) : null, popupOpen ? _jsx(MentionPopup, { items: candidates, selected: selIdx, query: mention.query }) : null, _jsx(ModeBar, { approval: status.approval })] }));
 }

package/package.json

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