@nanhara/hara 0.98.0 → 0.98.2

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";
@@ -18,7 +18,26 @@ import { currentTodos, onTodosChange } from "../tools/todo.js";
 let _id = 0;
 const nid = () => ++_id;
 const stripAnsi = (s) => s.replace(/\x1b\[[0-9;]*m/g, "");
-function Block({ item, open }) {
+/** Prepare a finalized turn item for the append-only `<Static>` scrollback. A completed reasoning
+ *  block collapses to a single-line "✻ thought · N lines" notice (its full text preserved in `full`
+ *  for the Ctrl+T overlay) — mirroring codex writing finalized rows to scrollback ONCE. Every other
+ *  kind passes through unchanged. Used both mid-turn (as blocks finalize) and at turn end so a given
+ *  turn's reasoning is emitted to Static exactly once and never re-rendered/re-emitted. */
+function foldForHistory(it) {
+    if (it.kind !== "reasoning")
+        return it;
+    const lines = it.text.split("\n").filter((l) => l.trim()).length;
+    return { ...it, kind: "notice", text: `✻ thought · ${lines} lines`, full: it.text };
+}
+/** Redraw throttle for the LIVE region (~30fps). A fast token stream or a slow/remote terminal can
+ *  push deltas far faster than a human perceives; without a cap ink re-diffs the growing dynamic
+ *  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;
+// 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 })] }));
@@ -42,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) {
@@ -167,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;
@@ -208,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([]);
@@ -233,15 +264,25 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
     const queueRef = useRef([]); // type-ahead: FIFO of messages entered while working
     const [pool, setPool] = useState([]); // type-ahead pool: queued message lines, shown above the input
     const drainingRef = useRef(false); // idempotency guard so the drain effect can't double-send one item
-    const currentRef = useRef([]);
-    currentRef.current = current;
     const statusRef = useRef(status);
     statusRef.current = status;
+    // Live-region write path (codex-style): deltas mutate `liveRef` synchronously (exact, never dropped),
+    // and a throttled flush (~30fps) reconciles it into the `current` React state that actually renders.
+    // As each block finalizes (a new block kind begins) its predecessors are appended to `history`
+    // (`<Static>`, rendered once) and dropped from the live buffer — so only the tail block stays dynamic.
+    const liveRef = useRef([]);
+    const flushTimerRef = useRef(null);
+    const toStaticRef = useRef([]); // finalized blocks awaiting append to <Static> on the next flush
     useEffect(() => {
         const fn = () => setStatus((s) => ({ ...s, agents: activity.running }));
         activity.onChange(fn);
         return () => activity.onChange(null);
     }, []);
+    // Cancel any pending live-region flush on unmount so a timer can't fire after teardown.
+    useEffect(() => () => {
+        if (flushTimerRef.current)
+            clearTimeout(flushTimerRef.current);
+    }, []);
     // Subscribe to todo_write updates so the panel re-renders when the agent edits the checklist.
     useEffect(() => {
         const unsub = onTodosChange((list) => {
@@ -258,14 +299,46 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
                 clearTimeout(collapseTimerRef.current);
         };
     }, []);
-    const pushCurrent = useCallback((kind, text, merge = false) => {
-        setCurrent((cur) => {
-            const last = cur[cur.length - 1];
-            if (merge && last && last.kind === kind)
-                return [...cur.slice(0, -1), { ...last, text: last.text + text }];
-            return [...cur, { id: nid(), kind, text }];
-        });
+    // Reconcile the synchronously-mutated live buffer into React state, at most once per ~33ms. First
+    // append any finalized blocks to <Static> (once, in order), then publish the remaining live tail.
+    // The array identities are fresh each flush so React/ink re-render exactly the minimal live region.
+    const flushLive = useCallback(() => {
+        flushTimerRef.current = null;
+        if (toStaticRef.current.length) {
+            const graduated = toStaticRef.current;
+            toStaticRef.current = [];
+            setHistory((h) => [...h, ...graduated]);
+        }
+        setCurrent(liveRef.current.slice());
     }, []);
+    // Schedule a throttled flush. Coalesces a burst of deltas into one re-render per LIVE_FRAME_MS —
+    // the leading edge is immediate (snappy first paint) and subsequent deltas ride the timer.
+    const scheduleFlush = useCallback(() => {
+        if (flushTimerRef.current)
+            return;
+        flushTimerRef.current = setTimeout(flushLive, LIVE_FRAME_MS);
+    }, [flushLive]);
+    const pushCurrent = useCallback((kind, text, merge = false) => {
+        const live = liveRef.current;
+        const last = live[live.length - 1];
+        if (merge && last && last.kind === kind) {
+            // Same streaming block continues — grow it in place in the live buffer (no new React item).
+            live[live.length - 1] = { ...last, text: last.text + text };
+        }
+        else {
+            // A new block begins. Everything before it in the live buffer is now finalized: graduate it
+            // to <Static> (folding reasoning) so it's written to scrollback ONCE and never re-rendered.
+            if (live.length) {
+                for (const it of live)
+                    toStaticRef.current.push(foldForHistory(it));
+                liveRef.current = [{ id: nid(), kind, text }];
+            }
+            else {
+                live.push({ id: nid(), kind, text });
+            }
+        }
+        scheduleFlush();
+    }, [scheduleFlush]);
     // Lazy vision notice: 顾雅 spec — the header no longer carries an always-on "👁 …" line.
     // Instead, the first time an image attachment shows up in this session, we print the
     // routing notice once (inline). `visionShownRef` is the session-scoped flag.
@@ -357,17 +430,20 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
         catch (e) {
             pushCurrent("notice", `error: ${e instanceof Error ? e.message : String(e)}`);
         }
-        // Commit this turn's items to scrollback. Read the LIVE current via the updater — currentRef only
-        // syncs on render (line ~225), so a fast slash-only turn (/design, /help, /skills…) that pushes a
-        // notice and returns before any re-render would otherwise commit nothing and lose the notice.
-        setCurrent((cur) => {
-            const committed = cur.map((it) => it.kind === "reasoning"
-                ? { ...it, kind: "notice", text: `✻ thought · ${it.text.split("\n").filter((l) => l.trim()).length} lines`, full: it.text }
-                : it);
-            if (committed.length)
-                setHistory((h) => [...h, ...committed]);
-            return [];
-        });
+        // Commit this turn's items to scrollback. The authoritative source is the synchronous live
+        // buffer (liveRef + any blocks already graduated to toStaticRef), NOT the throttled `current`
+        // React state — so a fast slash-only turn (/design, /help, /skills…) that pushes a notice and
+        // returns before a flush fires still commits it, and a pending throttle timer can't double-emit.
+        if (flushTimerRef.current) {
+            clearTimeout(flushTimerRef.current);
+            flushTimerRef.current = null;
+        }
+        const committed = [...toStaticRef.current, ...liveRef.current.map(foldForHistory)];
+        toStaticRef.current = [];
+        liveRef.current = [];
+        if (committed.length)
+            setHistory((h) => [...h, ...committed]);
+        setCurrent([]);
         setWorking(false);
         ctrlRef.current = null;
         // Schedule a panel collapse: if there was a checklist this turn, fold it to a one-line summary

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.0",
+  "version": "0.98.2",
   "description": "hara — a coding agent CLI that runs like an engineering org.",
   "bin": {
     "hara": "dist/index.js"