@nanhara/hara 0.99.0 → 0.99.2

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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.99.2 — TUI: steadier input box + transient approval selector
+
+- **Approval-mode selector is now transient, not always-on chrome.** The persistent two-row ModeBar under every
+  frame is gone; the current mode reads inline in the status footer (colored: red=full-auto, cyan=plan,
+  green=edit), and **shift+tab** pops the full picker + descriptions, which auto-hides after ~2.5s. Reclaims two
+  rows and cuts per-frame redraw during streaming — matching codex (transient approval overlay + compact status
+  line) and Claude Code.
+  - `tui/InputBox.tsx`: `footerParts`/`approvalColor` (colored mode in the footer); `ModeBar` gated on a new
+    `showModeSelector` prop. `tui/App.tsx`: shift+tab arms a 2.5s auto-hide timer.
+- **Input box no longer bobs up/down while the model thinks.** A streaming reasoning block used to render up to
+  ~11 live rows above the input, then fold to a single "✻ thought · N lines" line on finalize — that N→1
+  collapse yanked the box up every time. Reasoning now shows a **compact 1-line header by default** (same height
+  as the folded form → zero jump); **ctrl+r** expands the full streaming body, and **ctrl+t** always has the full
+  text. (ink can't bottom-pin the composer the way codex's ratatui viewport does, so this removes the dominant
+  jump; minor spinner/panel shifts at turn boundaries remain.)
+  - `tui/App.tsx`: the reasoning `Block` renders header-only unless `open` (ctrl+r).
+
 ## 0.94.1 — unreleased (gateway: relay is on-inbound, not a noisy push)
 
 - **Fix the bind output relay to be quiet + platform-correct.** 0.94.0's continuous 3s timer-push flooded chat

package/dist/tui/App.js

@@ -34,6 +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;
+// How long the transient approval-mode selector stays up after a shift+tab before it auto-hides. Long
+// enough to read the descriptions + tap shift+tab again to keep cycling; short enough that it isn't
+// always-on chrome (codex/Claude-Code keep the mode compact in the status line, not a permanent bar).
+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.
@@ -44,15 +48,18 @@ const Block = memo(function Block({ item, open }) {
         case "assistant":
             return _jsx(Text, { children: renderMarkdown(item.text) }); // headers/bold/inline-code/bullets + verbatim fences
         case "reasoning": {
-            // Codex-style: stream the reasoning dim + italic with a leading "• " bullet; show the full text up to
-            // MAX lines, fold longer to the live tail with a "… +N lines" summary. ctrl-r expands/collapses.
-            const MAX = 10;
+            // 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
+            // the body live (up to ~11 rows) and then folded to 1, the input box would jump UP by that many rows
+            // every time — the "bobbing" you saw. So by default we show only the compact 1-line header (same height
+            // as the folded form → the box holds still). ctrl+r opts into the full streaming body (its own taller
+            // view), and the FULL text is always in the ctrl+t transcript regardless — nothing is lost.
             const lines = item.text.replace(/\n+$/, "").split("\n");
-            const long = lines.length > MAX;
-            const shown = open || !long ? lines : lines.slice(-MAX); // short or expanded → all; long & collapsed → live tail
-            const omitted = long && !open ? lines.length - MAX : 0;
-            const hint = long ? (open ? " · ctrl-r collapse" : ` · … +${omitted} lines · ctrl-r expand`) : "";
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accent(), dimColor: true, children: `✻ thinking … ${lines.length} line${lines.length === 1 ? "" : "s"}${hint}` }), shown.map((l, i) => (_jsx(Text, { dimColor: true, italic: true, children: `${i === 0 ? "• " : "  "}${l}` }, i)))] }));
+            const n = lines.length;
+            const hint = open ? " · ctrl-r collapse" : " · ctrl-r expand";
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: accent(), dimColor: true, children: `✻ thinking … ${n} line${n === 1 ? "" : "s"}${hint}` }), open
+                        ? lines.map((l, i) => (_jsx(Text, { dimColor: true, italic: true, children: `${i === 0 ? "• " : "  "}${l}` }, i)))
+                        : null] }));
         }
         case "tool":
             return _jsx(Text, { dimColor: true, children: "  " + item.text });
@@ -278,6 +285,8 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
     const [askText, setAskText] = useState(null);
     const [reasoningOpen, setReasoningOpen] = useState(false);
     const [showTranscript, setShowTranscript] = useState(false); // Ctrl+T full-transcript overlay
+    const [modeSelector, setModeSelector] = useState(false); // transient approval selector: shift+tab pops it, auto-hides
+    const modeSelectorTimerRef = useRef(null);
     // Live checklist mirror: TodoPanel reads this, and `Working` derives its spinner verb from the
     // in_progress item. The tool emits on every todo_write — keeps the UI in lockstep with the agent.
     const [todos, setTodos] = useState(() => currentTodos());
@@ -303,10 +312,12 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
         activity.onChange(fn);
         return () => activity.onChange(null);
     }, []);
-    // Cancel any pending live-region flush on unmount so a timer can't fire after teardown.
+    // Cancel any pending timers on unmount so they can't fire after teardown.
     useEffect(() => () => {
         if (flushTimerRef.current)
             clearTimeout(flushTimerRef.current);
+        if (modeSelectorTimerRef.current)
+            clearTimeout(modeSelectorTimerRef.current);
     }, []);
     // Subscribe to todo_write updates so the panel re-renders when the agent edits the checklist.
     useEffect(() => {
@@ -552,10 +563,20 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
             }
             ctrlRef.current?.abort();
         }
-        else if (key.tab && key.shift && cycleApproval)
+        else if (key.tab && key.shift && cycleApproval) {
             setStatus((s) => ({ ...s, approval: cycleApproval(s.approval) }));
+            // Pop the approval selector transiently (codex-style) and (re)arm the auto-hide — tapping shift+tab
+            // again keeps it up while cycling; it folds away on its own so it isn't permanent chrome.
+            setModeSelector(true);
+            if (modeSelectorTimerRef.current)
+                clearTimeout(modeSelectorTimerRef.current);
+            modeSelectorTimerRef.current = setTimeout(() => {
+                setModeSelector(false);
+                modeSelectorTimerRef.current = null;
+            }, MODE_SELECTOR_MS);
+        }
     });
     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))), !prompt && _jsx(TodoPanel, { todos: todos }), working && !prompt && _jsx(Working, { 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))) })), _jsx(InputBox, { status: status, cwd: cwd, model: model, route: header?.routeHost, isActive: !prompt, working: working && !askText, queued: pool.length, 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 }, item.id))), !prompt && _jsx(TodoPanel, { todos: todos }), working && !prompt && _jsx(Working, { 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))) })), _jsx(InputBox, { status: status, cwd: cwd, model: model, route: header?.routeHost, isActive: !prompt, working: working && !askText, queued: pool.length, vim: vim, showModeSelector: modeSelector, onSubmit: handleSubmit, onClipboardImage: onClipboardImage })] }));
 }

package/dist/tui/InputBox.js

@@ -35,18 +35,49 @@ export function footerCwd(abs, home = process.env.HOME ?? "", maxLen = 28) {
     const slash = tail.indexOf("/");
     return "…" + (slash > 0 ? tail.slice(slash) : tail);
 }
-/** Compose the single dim footer line rendered below the box. Pure so the ordering/spacing (and the
- *  optional route segment) can be pinned without rendering React. Shape (codex-style status line):
- *  `<model> · <approval>[ · <route>] · <cwd> · ↑<in> ↓<out> · ctx <pct>%`. `ctx N%` is always present
- *  (from 0 on) so the field never pops in mid-session and shifts the layout. */
-export function footerLine(model, s, cwdShort, route) {
+/** Approval-mode accent color, shared by the footer indicator + the transient ModeBar. full-auto is
+ *  the dangerous one (red), plan is read-only (cyan), the edit modes are green. */
+export function approvalColor(a) {
+    return a === "full-auto" ? "red" : a === "plan" ? "cyan" : "green";
+}
+/** The footer split into three parts so the ACTIVE approval mode can be colored inline. The always-on
+ *  ModeBar was removed — the mode now lives, glanceable and colored, right here in the footer, and
+ *  shift+tab pops a transient selector. `prefix`+`mode`+`suffix` concatenates to exactly the old
+ *  `footerLine` (same text, same spacing) — only the color of the `mode` token differs. Pure so the
+ *  ordering/spacing can be pinned without rendering React. Shape (codex-style status line):
+ *  `<model> · <approval>[ · <route>] · <cwd> · ↑<in> ↓<out> · ctx <pct>%`. The session name is NOT here —
+ *  it rides the input box's top-right border (see TopBorder). `ctx N%` is always present (from 0 on) so
+ *  the field never pops in mid-session and shifts the layout. */
+export function footerParts(model, s, cwdShort, route) {
     const routeSeg = route ? ` · ${route}` : "";
-    return `  ${model} · ${s.approval}${routeSeg} · ${cwdShort} · ↑${tok(s.input)} ↓${tok(s.output)} · ctx ${s.ctxPct}%`;
+    return {
+        prefix: `  ${model} · `,
+        mode: s.approval,
+        suffix: `${routeSeg} · ${cwdShort} · ↑${tok(s.input)} ↓${tok(s.output)} · ctx ${s.ctxPct}%`,
+    };
 }
-// The merged status footer (was split across the old top/bottom dash-rules): model · approval ·
-// route · cwd · usage · ctx. Memoized so a prompt keystroke doesn't reconcile it.
+/** Back-compat: the full footer as one string (prefix+mode+suffix). Kept for any pure consumer/test. */
+export function footerLine(model, s, cwdShort, route) {
+    const p = footerParts(model, s, cwdShort, route);
+    return p.prefix + p.mode + p.suffix;
+}
+// The merged status footer: model · approval · route · cwd · usage · ctx. The active approval mode is
+// colored inline (the always-on ModeBar is gone — shift+tab now pops a transient selector instead), so
+// the outer <Text> is NOT dim: only the prefix/suffix are dimmed and the mode token stays bright.
+// Memoized so a prompt keystroke doesn't reconcile it.
 const Footer = memo(function Footer({ model, s, cwdShort, route }) {
-    return _jsx(Text, { dimColor: true, children: footerLine(model, s, cwdShort, route) });
+    const { prefix, mode, suffix } = footerParts(model, s, cwdShort, route);
+    return (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: prefix }), _jsx(Text, { color: approvalColor(s.approval), bold: true, children: mode }), _jsx(Text, { dimColor: true, children: suffix })] }));
+});
+// The rounded TOP edge of the input box, carrying the session name in the right corner (it "rides"
+// the border — codex-style titled panel, and where hara has always shown it). Drawn by hand because
+// ink's <Box borderStyle> has no title slot; the box below it renders with `borderTop={false}` and a
+// fixed `width`, so this line supplies the top with its two corners and everything lines up exactly.
+// Layout (total = width): `╭` + left dashes + ` ● <name> ` + `─╮`. `●` (U+25CF) is a hard 1-cell glyph
+// (unlike the emoji-presentation `⏺`, which some terminals render 2 cells wide and would skew the corner).
+const TopBorder = memo(function TopBorder({ name, width }) {
+    const left = Math.max(2, width - name.length - 7); // ╭(1)+ " "(1)+●(1)+" name "(len+2)+"─╮"(2)
+    return (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "╭" + "─".repeat(left) + " " }), _jsx(Text, { color: "cyan", children: "\u25CF" }), _jsx(Text, { bold: true, children: ` ${name} ` }), _jsx(Text, { dimColor: true, children: "─╮" })] }));
 });
 const MODE_DESC = {
     suggest: "confirms edits & commands",
@@ -54,8 +85,10 @@ const MODE_DESC = {
     "full-auto": "runs everything — no prompts  ⚠",
     plan: "investigate read-only, then propose a plan to approve",
 };
-// 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.
+// Transient approval-mode selector: popped by shift+tab and auto-hidden after a beat (App owns the
+// timer) so it isn't always-on chrome. All modes listed, the active one highlighted (red for the
+// dangerous full-auto) with a one-line description and the shift+tab hint. When hidden, the current
+// mode still reads (colored) from the footer line — this just adds the full picker + descriptions.
 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 ⇄` })] }));
@@ -211,7 +244,7 @@ const InputLine = memo(function InputLine({ value, cursor, width, gutter, gutter
 });
 /** Bordered prompt box + one dim status footer (model · approval · route · cwd · usage · ctx) +
  *  ModeBar, with an @path popup. */
-export function InputBox({ status, cwd, model, route, 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", }) {
+export function InputBox({ status, cwd, model, route, width, onSubmit, onClipboardImage, isActive = true, working = false, queued = 0, vim = false, showModeSelector = false, placeholder = "Type a task · /help · @file · Ctrl+V paste image · shift+tab mode · Esc interrupts", }) {
     const { stdout } = useStdout();
     const w = width ?? stdout?.columns ?? 80;
     const [value, setValue] = useState("");
@@ -369,9 +402,11 @@ export function InputBox({ status, cwd, model, route, width, onSubmit, onClipboa
     }, { isActive });
     const gutter = vim && mode === "normal" ? "◆ " : "› ";
     const gutterColor = vim ? (mode === "normal" ? "yellow" : "green") : "cyan";
-    // The prompt box borders subtract 2 cells (1 each side) from the usable text width; InputLine's
-    // deterministic wrap needs the INNER width so the cursor/continuation gutter stay exact.
-    const innerW = Math.max(1, w - 2);
+    // The box borders (1 each side) + paddingX (1 each side) subtract 4 cells; InputLine's deterministic
+    // wrap needs the INNER width so the cursor/continuation gutter stay exact. The box is a fixed `width={w}`
+    // with `borderTop={false}` so the hand-drawn TopBorder (with the session title) supplies the top edge
+    // + corners and everything aligns column-for-column.
+    const innerW = Math.max(1, w - 4);
     const cwdShort = footerCwd(cwd);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { borderStyle: "round", borderColor: "gray", borderDimColor: true, paddingX: 1, children: _jsx(InputLine, { value: value, cursor: cursor, width: innerW, 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(Footer, { model: model, s: status, cwdShort: cwdShort, route: route }), 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 })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBorder, { name: status.sessionName || "session", width: w }), _jsx(Box, { borderStyle: "round", borderTop: false, borderColor: "gray", borderDimColor: true, paddingX: 1, width: w, children: _jsx(InputLine, { value: value, cursor: cursor, width: innerW, 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(Footer, { model: model, s: status, cwdShort: cwdShort, route: route }), 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, showModeSelector ? _jsx(ModeBar, { approval: status.approval }) : null] }));
 }

package/package.json

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