@nanhara/hara 0.99.1 → 0.99.3

package/CHANGELOG.md

@@ -5,6 +5,45 @@ 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.3 — TUI: rock-steady input box (constant-height chrome) + plan mode grows a real handshake
+
+Built from a source-level study of codex-rs (bottom-anchored viewport, plan cells) and Claude Code
+(flexShrink-pinned bottom region, ExitPlanMode handshake).
+
+- **The input box no longer jumps at turn boundaries.** The bottom chrome is now a CONSTANT-height
+  stack: a permanent one-row status slot above the box swaps its content — spinner + verb + queue count
+  while working ⇄ dim key hints when idle — instead of appearing/disappearing (the old `Working` block +
+  `⌨ working` hint row cost ±3 rows at every turn start/end). The shift+tab picker (`ModeLine`, now ONE
+  row with short inline descriptions) swaps into the SAME slot, so popping/auto-hiding it moves nothing.
+  The todo panel no longer folds on a 30s timer (which yanked the box up while you read) — it folds to
+  its one-line summary when the NEXT turn starts, coinciding with your own submit.
+  - `tui/App.tsx`: `StatusRow`/`ModeLine` + the constant slot; fold-on-submit; `tui/InputBox.tsx`: the
+    working-hint row and two-row ModeBar are gone (mode still reads colored in the footer).
+- **Plan mode: the MODEL now decides when the plan is ready** (Claude-Code style), instead of hara
+  nagging "proceed?" after every read-only turn. A run-scoped `exit_plan` tool (new `extraTools` option
+  on `runAgent` — per-run tools, never registered globally) is offered only in plan mode; when the model
+  calls it, the plan renders as a bordered `╭─ Plan` block (codex ProposedPlanCell-style) and THEN the
+  proceed picker appears. Investigation/Q&A turns end quietly, still in plan mode.
+  - `agent/loop.ts`: `opts.extraTools` (advertised post-filter, resolved before the registry);
+    `index.ts`: plan branch rewired + `PLAN_SYSTEM` teaches the exit_plan contract.
+
+## 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/agent/loop.js

@@ -93,7 +93,10 @@ export async function runAgent(history, opts) {
             for (const m of await opts.pendingInput())
                 history.push(m);
         }
-        const specs = opts.toolFilter ? toolSpecs().filter((t) => opts.toolFilter(t.name)) : toolSpecs();
+        const baseSpecs = opts.toolFilter ? toolSpecs().filter((t) => opts.toolFilter(t.name)) : toolSpecs();
+        const specs = opts.extraTools?.length
+            ? [...baseSpecs, ...opts.extraTools.map((t) => ({ name: t.name, description: t.description, input_schema: t.input_schema }))]
+            : baseSpecs;
         const sink = ctx.ui; // TUI mode: route output to ink instead of stdout
         const tty = stdout.isTTY && !opts.quiet && !sink;
         const md = tty && process.env.HARA_MD !== "0" ? makeRenderer(out) : null;
@@ -211,14 +214,16 @@ export async function runAgent(history, opts) {
         if (r.stop !== "tool_use")
             return;
         const plans = [];
+        // Extra (per-run) tools win over the registry so a run-scoped tool can't be shadowed by a global one.
+        const resolveTool = (name) => opts.extraTools?.find((t) => t.name === name) ?? getTool(name);
         for (const tu of r.toolUses) {
             if (breakerHalt) {
                 // Circuit-breaker halted the run: refuse every remaining call in this round with a clear message
                 // (no hang, no further tools) so the model + user get a definitive stop.
-                plans.push({ tu, tool: getTool(tu.name), denied: "Guardian circuit-breaker halted this run (too many high-risk actions blocked). Ask the user to review and re-run." });
+                plans.push({ tu, tool: resolveTool(tu.name), denied: "Guardian circuit-breaker halted this run (too many high-risk actions blocked). Ask the user to review and re-run." });
                 continue;
             }
-            const tool = getTool(tu.name);
+            const tool = resolveTool(tu.name);
             if (!tool) {
                 plans.push({ tu, tool: undefined, denied: `Unknown tool: ${tu.name}` });
                 continue;

package/dist/index.js

@@ -691,9 +691,24 @@ async function nameSession(provider, history) {
         return titleFrom(history);
     }
 }
-const PLAN_SYSTEM = "You are in PLAN MODE. Investigate read-only (read_file / grep / glob / ls / web_fetch) and think, " +
-    "then propose a concise step-by-step plan for the task. Do NOT edit files or run commands yet — only plan. " +
-    "End your message with the plan as a short numbered list.";
+/** Render a proposed plan as a bordered block for the transcript (codex ProposedPlanCell-style).
+ *  Left-border-only frame — right-edge alignment against variable-width content is brittle, and the
+ *  open right side lets long lines wrap naturally. Emitted via the diff sink channel (renders verbatim,
+ *  not dimmed like notice). */
+const renderPlanBlock = (plan) => {
+    const lines = plan.replace(/\n+$/, "").split("\n");
+    const top = c.cyan("╭─ ") + c.bold(c.cyan("Plan")) + c.cyan(" " + "─".repeat(42));
+    const body = lines.map((l) => c.cyan("│ ") + l).join("\n");
+    return `${top}\n${body}\n${c.cyan("╰" + "─".repeat(48))}`;
+};
+// Plan mode's contract (Claude-Code style handshake): the MODEL decides when the plan is ready by
+// calling `exit_plan` — we never nag with a proceed-prompt after turns that were just investigation
+// or Q&A. codex's equivalent is the plan streaming to a dedicated cell + Enter-to-implement.
+const PLAN_SYSTEM = "You are in PLAN MODE — a read-only investigation phase. Explore with read_file / grep / glob / ls / " +
+    "web tools and think. Do NOT edit files or run mutating commands — only investigate and plan. " +
+    "When (and only when) you have a complete, actionable plan, call the `exit_plan` tool with the full plan " +
+    "(concise markdown, short numbered steps), then stop and wait for the user's decision. " +
+    "If the user is asking a question, or the plan isn't ready yet, just answer normally WITHOUT calling exit_plan.";
 const DISTILL_SYSTEM = "The session is ending. Reflect and persist only durable, reusable learnings: memory_write for facts / " +
     "conventions / the user's preferences, skill_create for reusable how-tos. Be selective — skip the trivial. Then reply DONE.";
 const MEMORY_DISTILL_SYSTEM = "You consolidate an agent's short-term daily memory logs into its durable long-term memory. You're given " +
@@ -3029,7 +3044,9 @@ program.action(async (opts) => {
                 };
                 const turnStart = Date.now(); // for the task-done notification (gated on elapsed)
                 if (appr === "plan") {
-                    // PLAN MODE: read-only investigate → propose a plan → selectable proceed → execute.
+                    // PLAN MODE: read-only investigate; the MODEL signals plan-readiness by calling `exit_plan`
+                    // (Claude-Code style handshake) — only then do we pop the proceed prompt. Turns that were just
+                    // investigation / Q&A end back at the input, still in plan mode, with no nagging.
                     const planImg = await resolveImages(images, h);
                     if (planImg.skip)
                         return;
@@ -3037,12 +3054,29 @@ program.action(async (opts) => {
                     recalledContext = "";
                     const pin = stats.input;
                     const pout = stats.output;
+                    // Run-scoped tool (never in the registry, so no other mode can see it): captures the proposed
+                    // plan and renders it as a bordered block (codex's ProposedPlanCell equivalent) via the sink.
+                    let proposedPlan = null;
+                    const exitPlanTool = {
+                        name: "exit_plan",
+                        description: "Call when your plan is complete and ready for the user to approve. Pass the FULL plan as concise " +
+                            "markdown (short numbered steps). This ends the planning phase — after calling it, stop and wait.",
+                        input_schema: { type: "object", properties: { plan: { type: "string", description: "the complete plan (markdown, short numbered steps)" } }, required: ["plan"] },
+                        kind: "read", // never prompts — submitting a plan is not a mutation
+                        run: async (input, tctx) => {
+                            proposedPlan = String(input?.plan ?? "").trim();
+                            if (proposedPlan)
+                                tctx.ui?.diff(renderPlanBlock(proposedPlan));
+                            return "Plan submitted to the user for approval. Stop now and wait for their decision — do not keep working.";
+                        },
+                    };
                     await runAgent(history, {
                         provider,
                         ctx: { cwd, sandbox, spawn, ui, ask: h.ask, describeImage: describeScreenshot, locate: locateScreenshot },
                         approval: "suggest",
                         confirm: h.confirm,
                         toolFilter: (n) => READONLY_TOOLS.has(n),
+                        extraTools: [exitPlanTool],
                         systemOverride: PLAN_SYSTEM,
                         memory: buildMemory(),
                         projectContext,
@@ -3056,6 +3090,11 @@ program.action(async (opts) => {
                     }
                     h.sink.usage(stats.input - pin, stats.output - pout);
                     saveSession(meta, history);
+                    if (!proposedPlan) {
+                        // No exit_plan this turn — the model was investigating or answering. Stay in plan mode quietly.
+                        notifyDone(cfg.notify, { message: meta.title || "plan turn complete", elapsedMs: Date.now() - turnStart });
+                        return;
+                    }
                     const choice = await h.select("hara has a plan — proceed?", [
                         { label: "Yes, and auto-apply edits", value: "auto-edit" },
                         { label: "Yes, approve each edit", value: "suggest" },

package/dist/tui/App.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The hara TUI (ink). Layout, top to bottom:
-//   <Static>   committed transcript — rendered once each, scrolls into native scrollback
-//   current    the in-progress turn's blocks (assistant text / reasoning / tool / diff), live
-//   <Working>  spinner while a turn runs (Esc interrupts)
-//   <InputBox> the pinned, bordered prompt (or a confirm prompt when a tool needs approval)
+//   <Static>    committed transcript — rendered once each, scrolls into native scrollback
+//   current     the in-progress turn's blocks (assistant text / reasoning / tool / diff), live
+//   <TodoPanel> live checklist (when the agent keeps one)
+//   status slot ALWAYS one row: StatusRow (spinner while working / key hints idle) ⇄ ModeLine
+//               (shift+tab picker) — constant height so the input box never bobs at turn boundaries
+//   <InputBox>  the bordered prompt (or a confirm prompt when a tool needs approval)
 //
 // 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 { memo, useCallback, useEffect, useRef, useState } from "react";
-import { InputBox } from "./InputBox.js";
+import { InputBox, MODES, approvalColor } from "./InputBox.js";
 import { activity } from "../activity.js";
 import { ctxPctFor } from "../statusbar.js";
 import { accent } from "./theme.js";
 import { renderMarkdown } from "../md.js";
-import { currentTodos, onTodosChange } from "../tools/todo.js";
+import { clearTodos, currentTodos, onTodosChange } from "../tools/todo.js";
 let _id = 0;
 const nid = () => ++_id;
 const stripAnsi = (s) => s.replace(/\x1b\[[0-9;]*m/g, "");
@@ -34,6 +36,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 +50,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 });
@@ -211,25 +220,50 @@ export function spinnerVerb(list, elapsedSec) {
     }
     return `working ${elapsedSec}s · esc to interrupt`;
 }
+// The status row — ALWAYS rendered, exactly one content row (codex-style: the bottom pane keeps a
+// constant-height status slot and swaps its CONTENT). This is the anti-bob keystone: the old
+// `Working` block appeared at turn start and vanished at turn end (±2 rows), so the input box
+// jumped up 3 rows at every turn boundary (together with the ⌨-hint line, now folded in here).
+// Working → spinner + verb + queue count; idle → dim key hints. Same height either way → zero shift.
+//
 // 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).
+// redraws the WHOLE dynamic region (input box 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 — meaningfully calmer over a slow/remote link. Elapsed seconds come from a
+// wall-clock start, so the "Ns" text stays exact and stable.
 const SPINNER_FRAME_MS = 125;
-function Working({ todos }) {
+const IDLE_HINTS = "⏎ send · @ file · ctrl+v image · ctrl+t transcript · shift+tab mode";
+function StatusRow({ working, todos, queued }) {
     const [frame, setFrame] = useState(0);
     const startRef = useRef(Date.now());
     useEffect(() => {
+        if (!working)
+            return;
         startRef.current = Date.now();
         const id = setInterval(() => setFrame((x) => x + 1), SPINNER_FRAME_MS);
         return () => clearInterval(id);
-    }, []);
+    }, [working]);
+    if (!working) {
+        return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: `  ${IDLE_HINTS}` }) }));
+    }
     const frames = "⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏";
     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)}` })] }));
+    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: frames[frame % frames.length] }), _jsx(Text, { dimColor: true, children: ` ${spinnerVerb(todos, elapsedSec)} · ⏎ queues${queued ? ` (${queued})` : ""}` })] }));
 }
+// Short per-mode descriptions for the ONE-ROW mode line (the old two-row ModeBar's long sentences
+// don't fit inline). Full behavior is documented in /help; this line is a switching aid, not a manual.
+const MODE_HINT = {
+    suggest: "confirms edits+cmds",
+    "auto-edit": "auto edits · asks cmds",
+    "full-auto": "no prompts ⚠",
+    plan: "read-only → plan",
+};
+// Transient approval-mode line: popped by shift+tab in PLACE of the StatusRow (equal-height swap —
+// one row for one row, so the picker appearing/auto-hiding never moves the input box). All modes
+// listed, the active one colored, with the active mode's short description inline.
+const ModeLine = memo(function ModeLine({ approval }) {
+    return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [MODES.map((m, i) => (_jsxs(Text, { children: [i > 0 ? "  " : "  ", m === approval ? _jsx(Text, { color: approvalColor(m), bold: true, children: `◆ ${m}` }) : _jsx(Text, { dimColor: true, children: m })] }, m))), _jsx(Text, { dimColor: true, children: ` · ${MODE_HINT[approval]} · ⇄ shift+tab` })] }) }));
+});
 // 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.
@@ -278,13 +312,11 @@ 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());
-    // Collapse-after-turn: once a turn ends, leave the panel visible briefly (so the user sees the
-    // final state) then fold it into a single-line "Todos: N/M done" notice in history. Cleared if
-    // a new turn starts before the timer fires.
-    const collapseTimerRef = useRef(null);
     const ctrlRef = useRef(null);
     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
@@ -303,26 +335,19 @@ 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(() => {
         const unsub = onTodosChange((list) => {
             setTodos([...list]); // copy so React sees a new array (the tool reuses one)
-            // A change mid-turn cancels any pending collapse — the user is still working with this list.
-            if (collapseTimerRef.current) {
-                clearTimeout(collapseTimerRef.current);
-                collapseTimerRef.current = null;
-            }
         });
-        return () => {
-            unsub();
-            if (collapseTimerRef.current)
-                clearTimeout(collapseTimerRef.current);
-        };
+        return unsub;
     }, []);
     // 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.
@@ -407,6 +432,15 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
             setPool(queueRef.current.map((q) => q.line.trim() || "🖼 (image)"));
             return;
         }
+        // Fold the previous turn's checklist NOW, at the natural boundary (a new task begins). The old
+        // 30s-idle timer yanked the input box UP by the panel's height while the user was reading/typing
+        // (anti-bob); folding on submit means the shrink coincides with the user's own action.
+        if (currentTodos().length) {
+            const list = currentTodos();
+            const done = list.filter((td) => td.status === "done").length;
+            setHistory((h) => [...h, { id: nid(), kind: "notice", text: `  ✓ Todos: ${done}/${list.length} done` }]);
+            clearTodos(); // emits → the panel unmounts via onTodosChange
+        }
         if (images?.length)
             noteVisionIfNeeded(); // one-shot inline notice on first image of the session
         setHistory((h) => [...h, { id: nid(), kind: "user", text: t }]); // t already carries any [Image #N] tokens
@@ -471,20 +505,6 @@ export function App({ initialStatus, model, cwd, header, onSubmit, cycleApproval
         setCurrent([]);
         setWorking(false);
         ctrlRef.current = null;
-        // Schedule a panel collapse: if there was a checklist this turn, fold it to a one-line summary
-        // in scrollback after ~30s of quiet (i.e. no new todo_write or new turn).
-        if (collapseTimerRef.current)
-            clearTimeout(collapseTimerRef.current);
-        if (currentTodos().length) {
-            collapseTimerRef.current = setTimeout(() => {
-                const list = currentTodos();
-                if (!list.length)
-                    return;
-                const done = list.filter((t) => t.status === "done").length;
-                setHistory((h) => [...h, { id: nid(), kind: "notice", text: `  ✓ Todos: ${done}/${list.length} done` }]);
-                collapseTimerRef.current = null;
-            }, 30_000);
-        }
     }, [working, prompt, askText, onSubmit, pushCurrent, model, exit, drainQueue, noteVisionIfNeeded]);
     // Drain the type-ahead pool: when the turn finishes (working → false) and nothing awaits a choice, COALESCE
     // every pooled message into ONE turn and send it — additions/clarifications go to the agent together, in order.
@@ -552,10 +572,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))), _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/dist/tui/InputBox.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The framed input box (ink): a rounded, dim-bordered box (codex polish) wrapping the prompt line,
-// with a single dim footer line rendered BELOW the box (model · approval · route · cwd · usage · ctx)
-// and the ModeBar under that. Pure-ish: pass `width` to make rendering deterministic in tests.
+// with a single dim footer line rendered BELOW the box (model · approval · route · cwd · usage · ctx).
+// The approval-mode picker and working/queue status live OUTSIDE this component (App's constant-height
+// StatusRow/ModeLine slot above the box). Pure-ish: pass `width` for deterministic 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
@@ -35,19 +36,39 @@ 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):
+/** Approval-mode accent color, shared by the footer indicator + App's transient ModeLine. 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 footerLine(model, s, cwdShort, route) {
+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
@@ -59,18 +80,6 @@ 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",
-    "auto-edit": "auto-applies edits · asks before commands",
-    "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.
-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));
@@ -220,9 +229,9 @@ const InputLine = memo(function InputLine({ value, cursor, width, gutter, gutter
     }
     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))) }));
 });
-/** 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", }) {
+/** Bordered prompt box + one dim status footer (model · approval · route · cwd · usage · ctx),
+ *  with an @path popup. */
+export function InputBox({ status, cwd, model, route, width, onSubmit, onClipboardImage, isActive = true, vim = 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("");
@@ -386,5 +395,5 @@ export function InputBox({ status, cwd, model, route, width, onSubmit, onClipboa
     // + 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(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, _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 }), popupOpen ? _jsx(MentionPopup, { items: candidates, selected: selIdx, query: mention.query }) : null] }));
 }

package/package.json

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