agent-from-zero 0.32.2 → 0.32.4

package/dist/ink/app.js

@@ -36,7 +36,10 @@ const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧",
 // <Static> (formatted as markdown) the moment it finishes.
 function liveTail(s) {
     const rows = process.stdout.rows || 24;
-    const maxLines = Math.max(3, rows - 14); // reserve rows for the input box + status bar + agent bar + margins
+    // Keep the preview SMALL (≤10 lines) even on a tall terminal: Ink repaints this
+    // whole region on every (throttled) update, and a smaller block repaints with
+    // far less flicker. The full reply still lands in <Static> on commit.
+    const maxLines = Math.max(3, Math.min(10, rows - 14)); // reserve rows for the input box + status bar + agent bar + margins
     const cols = process.stdout.columns || 80;
     const maxChars = maxLines * cols; // rough bound so one very long line can't blow past either
     let t = s.length > maxChars ? s.slice(-maxChars) : s;
@@ -95,6 +98,7 @@ export function App({ session, runTurn }) {
     const [status, setStatus] = useState(null); // the live spinner line
     const [live, setLive] = useState(null); // the streaming answer
     const [input, setInput] = useState(""); // the current input buffer
+    const [cursor, setCursor] = useState(0); // caret position WITHIN `input` (0..input.length), for ←/→ editing
     const [busy, setBusy] = useState(false); // a turn is in flight
     const [pending, setPending] = useState(null); // a prompt/menu blocking input
     const [menuSel, setMenuSel] = useState(0); // the select menu's cursor
@@ -462,6 +466,7 @@ export function App({ session, runTurn }) {
             setSubAgentFocus(null);
             const text = input.trim();
             setInput("");
+            setCursor(0);
             setHistIdx(null);
             if (!text)
                 return;
@@ -469,13 +474,26 @@ export function App({ session, runTurn }) {
                 history.push(text); // remember non-empty entries for ↑/↓
             void submitLine(text);
         }
+        else if (key.leftArrow) {
+            setCursor((c) => Math.max(0, c - 1)); // move the caret left within the line
+        }
+        else if (key.rightArrow) {
+            setCursor((c) => Math.min(input.length, c + 1)); // ...and right
+        }
+        else if (key.ctrl && char === "a") {
+            setCursor(0); // Home — jump to the start of the line
+        }
+        else if (key.ctrl && char === "e") {
+            setCursor(input.length); // End — jump to the end of the line
+        }
         else if (key.upArrow) {
-            // ↑ recall an earlier prompt (newest-first), like a shell.
+            // ↑ recall an earlier prompt (newest-first), like a shell; caret to its end.
             if (!history.length)
                 return;
             const idx = histIdx === null ? history.length - 1 : Math.max(0, histIdx - 1);
             setHistIdx(idx);
             setInput(history[idx]);
+            setCursor(history[idx].length);
         }
         else if (key.downArrow) {
             // ↓ walk back toward the fresh line.
@@ -485,24 +503,32 @@ export function App({ session, runTurn }) {
             if (idx >= history.length) {
                 setHistIdx(null);
                 setInput("");
+                setCursor(0);
             }
             else {
                 setHistIdx(idx);
                 setInput(history[idx]);
+                setCursor(history[idx].length);
             }
         }
         else if (key.backspace || key.delete) {
-            setInput((s) => s.slice(0, -1));
+            // Delete the char BEFORE the caret. Both Backspace and macOS DEL land here,
+            // so this is always a backward delete (forward-delete is rare; we skip it).
+            if (cursor > 0) {
+                setInput(input.slice(0, cursor - 1) + input.slice(cursor));
+                setCursor(cursor - 1);
+            }
         }
         else if (char && !key.ctrl && !key.meta) {
-            // A bulk chunk (a paste / a dropped file path) is normalized: a dropped
-            // file becomes a clean absolute path; ordinary pasted prose is unchanged.
+            // Insert at the caret (a bulk chunk — paste / dropped file path — is
+            // normalized: a dropped file becomes a clean absolute path; prose unchanged).
             const add = char.length > 1 ? normalizeDroppedPaths(char) : char;
             setHistIdx(null);
-            setInput((s) => s + add);
+            setInput(input.slice(0, cursor) + add + input.slice(cursor));
+            setCursor(cursor + add.length);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item, i) => _jsx(ItemView, { item: item }, i) }), live !== null && (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Text, { color: "green", children: "\u23FA " }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: live === "" ? chalk.dim("…") : liveTail(live) }) })] })), (status !== null || (busy && live === null)) && (_jsxs(Box, { marginTop: live === null ? 1 : 0, children: [_jsx(Spinner, {}), _jsxs(Text, { children: [" ", status ?? chalk.dim("working…")] })] })), pending?.kind === "select" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: pending.header }), _jsx(Text, { children: renderMenu(pending.options, menuSel) }), _jsx(Text, { children: MENU_HINT })] })), pending?.kind === "form" && formState && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: renderForm(pending.questions, formState) }) })), _jsxs(Box, { borderStyle: "round", borderColor: planMode ? "magenta" : "cyan", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: planMode ? "magenta" : "cyan", children: planMode ? "plan ❯ " : "❯ " }), _jsx(Text, { children: input }), _jsx(Text, { inverse: true, children: " " })] }), (() => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item, i) => _jsx(ItemView, { item: item }, i) }), live !== null && (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Text, { color: "green", children: "\u23FA " }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: live === "" ? chalk.dim("…") : liveTail(live) }) })] })), (status !== null || (busy && live === null)) && (_jsxs(Box, { marginTop: live === null ? 1 : 0, children: [_jsx(Spinner, {}), _jsxs(Text, { children: [" ", status ?? chalk.dim("working…")] })] })), pending?.kind === "select" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", children: pending.header }), _jsx(Text, { children: renderMenu(pending.options, menuSel) }), _jsx(Text, { children: MENU_HINT })] })), pending?.kind === "form" && formState && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: renderForm(pending.questions, formState) }) })), _jsxs(Box, { borderStyle: "round", borderColor: planMode ? "magenta" : "cyan", paddingX: 1, marginTop: 1, children: [_jsx(Text, { color: planMode ? "magenta" : "cyan", children: planMode ? "plan ❯ " : "❯ " }), _jsx(Text, { children: input.slice(0, cursor) }), _jsx(Text, { inverse: true, children: input.slice(cursor, cursor + 1) || " " }), _jsx(Text, { children: input.slice(cursor + 1) })] }), (() => {
                 const agents = listSubAgents();
                 if (!agents.length)
                     return null;

package/dist/ink/sink.js

@@ -29,15 +29,28 @@ export function makeInkSink(api) {
         // The streamed answer accumulates in the dynamic region as raw text (live,
         // "it's typing"), then commits as ONE markdown-rendered item when it ends —
         // partial markdown mid-stream renders badly, so we format only once it's whole.
+        //
+        // THROTTLED on purpose: a fast stream delivers tokens dozens of times a
+        // second, and Ink erases+redraws the whole live region on every state change
+        // — repainting a multi-line block that often is what makes a long answer
+        // "shake" violently. So we coalesce a burst of tokens into ONE setLive every
+        // ~90ms (≈11 fps, smooth but cheap). The final, complete answer still commits
+        // to <Static> on end(), so nothing is lost or under-rendered.
         answer() {
             let buf = "";
+            let timer = null;
             api.setLive("");
             return {
                 push: (tok) => {
                     buf += tok;
-                    api.setLive(buf);
+                    if (!timer)
+                        timer = setTimeout(() => { timer = null; api.setLive(buf); }, 90); // leading-edge throttle: schedule one repaint, ignore the burst until it fires
                 },
                 end: () => {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    } // drop the pending repaint — we're committing now
                     api.setLive(null); // clear the live preview first, then commit (no flicker/duplicate)
                     if (buf.trim())
                         api.pushItem({ kind: "answer", text: buf });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-from-zero",
-  "version": "0.32.2",
+  "version": "0.32.4",
   "description": "Build a Claude Code-style CLI agent from scratch, with AI as your pair programmer — companion code for a 10-day tutorial (DeepSeek by default, any OpenAI-compatible model)",
   "type": "module",
   "bin": {