kritya 0.8.25-beta → 0.8.27-beta

package/dist/ui/App.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
-import { Box, Static, Text, useApp, useInput, useStdout } from "ink";
-import TextInput from "ink-text-input";
+import { Box, Static, Text, useApp, useBoxMetrics, useInput, useStderr, useWindowSize, } from "ink";
 import fs from "node:fs";
-import fg from "fast-glob";
+import { glob } from "tinyglobby";
 import stringWidth from "string-width";
 import { gitDiffStat } from "../git/git.js";
 import { modelDisplaySlug } from "../config/models.js";
+import { setStderrSink } from "../stderr.js";
+import { openInEditor } from "./openInEditor.js";
 import { SessionStore } from "../session/store.js";
 import { defaultSandboxMode, sandboxAvailable } from "../shell/sandbox.js";
 import { resolveSafe } from "../tools/common.js";
@@ -18,8 +19,10 @@ import { PermissionPrompt } from "./PermissionPrompt.js";
 import { SelectList } from "./SelectList.js";
 import { Spinner } from "./Spinner.js";
 import { StatusLine } from "./StatusLine.js";
+import { StreamViewport } from "./StreamViewport.js";
+import { TextInput } from "./TextInput.js";
 import { TranscriptItem } from "./TranscriptItem.js";
-import { tailForViewport, terminalColumns, terminalRows } from "./viewport.js";
+import { terminalColumns, terminalRows } from "./viewport.js";
 import { BUILTIN_COMMANDS, runCommand } from "../commands/registry.js";
 import { mcpPrompts, mcpResources } from "../mcp/client.js";
 import { useAgent } from "./useAgent.js";
@@ -27,12 +30,58 @@ const MENTION_RE = /(^|\s)@([^\s@]*)$/;
 const MENTION_ALL_RE = /(?:^|\s)@([^\s@]+)/g;
 const MAX_MENTION_CHARS = 8000;
 const IMAGE_RE = /\.(png|jpe?g|gif|webp|bmp)$/i;
-// Erase screen + scrollback, then home the cursor (same sequence Ink itself
-// uses for its own "content taller than the terminal" clear path).
-const CLEAR_TERMINAL = "\x1b[2J\x1b[3J\x1b[H";
 export function App({ agent, workspace, modelRef, providerRef, config, resumedCount, initialTasks, undoStack, uiBridge, resumeSessions, customCommands = [], mcpToolCount = 0, onSwitchClient, onRequestPermissionReady, onRequestElicitationReady, privacyMode, firstLaunch, }) {
-    const { exit } = useApp();
-    const { stdout } = useStdout();
+    const { exit, suspendTerminal, waitUntilRenderFlush } = useApp();
+    /**
+     * Leave, but not until the screen has caught up.
+     *
+     * Ink's `exit()` tears the tree down in the same tick it is called, so a
+     * state update made in that same tick — the last line of a transcript, a
+     * "goodbye" item — is committed to a tree that is already being unmounted and
+     * never reaches the terminal. Verified: `setState(x); exit();` drops `x`,
+     * while deferring `exit()` by one macrotask draws it. `waitUntilRenderFlush()`
+     * is Ink's own barrier for exactly this — it yields so React can commit, then
+     * settles the throttled frame timer and waits for the write to drain.
+     */
+    const exitAfterFlush = useCallback(async () => {
+        await waitUntilRenderFlush();
+        exit();
+    }, [exit, waitUntilRenderFlush]);
+    /**
+     * Hand warnings raised outside React a way through Ink.
+     *
+     * Agent loops, MCP clients and plugin loaders are plain module functions, so
+     * they cannot call useStderr() themselves and had been writing straight to
+     * process.stderr — which Ink knows nothing about, so the text landed in the
+     * middle of the frame and the next repaint drew against the wrong line count.
+     * Registering Ink's own writer for the lifetime of the UI puts them back
+     * inside the clear-write-repaint sandwich. Cleared on unmount so the fallback
+     * is raw stderr again for anything that outlives the UI. See src/stderr.ts.
+     */
+    const { write: writeStderr } = useStderr();
+    useEffect(() => {
+        setStderrSink(writeStderr);
+        return () => setStderrSink(undefined);
+    }, [writeStderr]);
+    // Ink 8 types `stdout` as a plain Node stream, so the terminal's dimensions
+    // come from useWindowSize() rather than stdout.columns / stdout.rows — and
+    // it drives the re-layout on resize by itself. Kritya used to wipe the screen
+    // and remount <Static> on every column change, because Ink erased its live
+    // region against a stale line count after the terminal reflowed already-
+    // printed lines. Ink 8 fixed that class of bug itself: it redraws the frame
+    // when the terminal loses rows, keeps the content above the frame when rows
+    // shrink, and preserves scrollback — which the old `\x1b[3J` clear threw
+    // away. So the workaround is gone and nothing here watches for resizes.
+    const windowSize = useWindowSize();
+    const columns = terminalColumns(windowSize);
+    const rows = terminalRows(windowSize);
+    // The transcript column's real width, measured rather than assumed. The
+    // wrapped renderers lay out to this, so if the chrome around them ever gains
+    // padding the prose still breaks at the right column. Falls back to the
+    // terminal width for the first frame, before layout has run.
+    const rootRef = useRef(null);
+    const { clientWidth } = useBoxMetrics(rootRef);
+    const contentWidth = clientWidth || columns;
     const [input, setInput] = useState("");
     const [inputKey, setInputKey] = useState(0);
     const [steerInput, setSteerInput] = useState("");
@@ -42,90 +91,27 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
     const [fileList, setFileList] = useState([]);
     const [verbose, setVerbose] = useState(false);
     const [elapsed, setElapsed] = useState(0);
-    const [staticKey, setStaticKey] = useState(0);
     const inputHistory = useRef([]);
     const histIndex = useRef(-1); // -1 means "current, not browsing history"
-    /**
-     * Ctrl-chord bookkeeping for the text inputs.
-     *
-     * Ink delivers a keypress to every `useInput` hook, and ink-text-input
-     * ignores only Ctrl+C — so Ctrl+K and Ctrl+O run their shortcut *and* get
-     * typed into the box as a bare "k"/"o". Hitting the kill switch left junk on
-     * the prompt line, which the next Enter would have sent as a message.
-     *
-     * The two hooks can fire in either order, so both directions are covered:
-     * `ctrlChord` makes onChange drop the echoed letter when the shortcut ran
-     * first, and re-setting the value from `inputRef` undoes it when the input
-     * ran first. `inputRef` tracks committed state, so it always holds the value
-     * from before this keypress.
-     */
-    const ctrlChord = useRef(null);
-    const inputRef = useRef("");
-    const steerInputRef = useRef("");
-    useEffect(() => {
-        inputRef.current = input;
-    }, [input]);
-    useEffect(() => {
-        steerInputRef.current = steerInput;
-    }, [steerInput]);
-    const noteCtrlChord = (letter) => {
-        ctrlChord.current = letter;
-        setInput(inputRef.current);
-        setSteerInput(steerInputRef.current);
-        setTimeout(() => {
-            ctrlChord.current = null;
-        }, 0);
-    };
-    /** The change a Ctrl chord echoed into the box, rather than a real keystroke. */
-    const isCtrlEcho = (prev, next) => ctrlChord.current !== null && next === prev + ctrlChord.current;
-    // Terminals that reflow their buffer on resize (e.g. VS Code's xterm.js)
-    // rewrap already-printed full-width lines (banner art, box borders) to the
-    // new column count on their own, before Ink's next redraw arrives. Ink then
-    // erases based on a stale line count from before that reflow, so it clears
-    // the wrong number of rows and leaves stale copies of boxes/banners behind
-    // — compounding on every resize. There's no way to reflow in place safely,
-    // so once the column count actually settles on a new value (ignoring
-    // height-only resizes, e.g. VS Code adding a split terminal), wipe the
-    // screen ourselves and remount <Static> so Ink reprints everything fresh
-    // onto a blank canvas. The manual clear is safe here specifically because
-    // the forced remount immediately triggers Ink's own static-flush path,
-    // which resyncs its internal line-count bookkeeping — it's only unsafe to
-    // write raw ANSI without following it with something that resets that
-    // bookkeeping.
-    const lastColumns = useRef(stdout?.columns);
-    useEffect(() => {
-        if (!stdout)
-            return;
-        let timer;
-        const onResize = () => {
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                if (stdout.columns === lastColumns.current)
-                    return;
-                lastColumns.current = stdout.columns;
-                stdout.write(CLEAR_TERMINAL);
-                setStaticKey((k) => k + 1);
-            }, 150);
-        };
-        stdout.on("resize", onResize);
-        return () => {
-            clearTimeout(timer);
-            stdout.off("resize", onResize);
-        };
-    }, [stdout]);
+    // Ctrl-chord bookkeeping used to live here: Ink delivers a keypress to every
+    // `useInput` hook, and ink-text-input swallowed only Ctrl+C, so Ctrl+K and
+    // Ctrl+O ran their shortcut *and* typed a bare "k"/"o" into the prompt — which
+    // the next Enter would have sent as a message. Kritya's own TextInput drops
+    // every ctrl/meta chord before it reaches the buffer, so there is nothing left
+    // to undo and the workaround is gone.
     const refreshFileList = useCallback(() => {
-        fg("**/*", {
+        glob("**/*", {
             cwd: workspace,
             dot: false,
             onlyFiles: true,
+            expandDirectories: false,
             ignore: ["**/node_modules/**", "**/.git/**", "**/dist/**", ...loadIgnorePatterns(workspace)],
-            suppressErrors: true,
         })
             .then((files) => setFileList(files.sort().slice(0, 2000)))
             .catch(() => { });
     }, [workspace]);
     useEffect(refreshFileList, [refreshFileList]);
-    const { items, addItem, phase, setPhase, stream, thinking, activity, setActivity, runningPhase, setRunningPhase, workflow, refreshWorkflow, permission, elicitation, inFlight, model, provider, servedModel, totalUsage, totalCost, tasks, setTasks, ctxPct, setCtxPct, tokenBudget, budgetPct, budgetUsed, budgetStopped, resetBudget, setBudgetLimit, branch, planMode, setPlanMode, dryRunMode, killed, killReason, engageKill, releaseKill, acceptEdits, setAcceptEdits, autoApprovedCount, cycleMode, onAcceptEditsConfirm, abortRef, setModelEverywhere, setProviderEverywhere, costReport, runAgent, runWebSearch, onPermissionDecision, onElicitationDecision, onResumeSelect, requestPermission, requestElicitation, persistenceWarningCount, } = useAgent({
+    const { items, addItem, phase, setPhase, stream, thinking, activity, setActivity, runningPhase, setRunningPhase, workflow, refreshWorkflow, permission, elicitation, inFlight, model, provider, servedModel, totalUsage, totalCost, tasks, setTasks, ctxPct, setCtxPct, tokenBudget, budgetPct, budgetUsed, budgetStopped, resetBudget, setBudgetLimit, branch, planMode, setPlanMode, dryRunMode, killed, killReason, engageKill, releaseKill, acceptEdits, setAcceptEdits, bypassMode, setBypassMode, autoApprovedCount, cycleMode, onAcceptEditsConfirm, onBypassModeConfirm, abortRef, setModelEverywhere, setProviderEverywhere, costReport, runAgent, runWebSearch, onPermissionDecision, onElicitationDecision, onResumeSelect, requestPermission, requestElicitation, persistenceWarningCount, } = useAgent({
         agent,
         workspace,
         modelRef,
@@ -221,13 +207,37 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
         setInputKey((k) => k + 1);
         setFileIndex(0);
     };
+    // Ctrl+E opens the file the agent touched most recently in the user's
+    // $EDITOR, suspending the UI while the editor owns the terminal. Ink
+    // restores everything and repaints from scratch on resume; a hand-edit is
+    // reported by the undo stack's watcher via onExternalEdit like any other
+    // outside edit. Guarded against double presses — suspending twice throws.
+    const editorBusy = useRef(false);
+    const openInEditorFlow = useCallback(async () => {
+        if (editorBusy.current)
+            return;
+        const target = undoStack.lastTouchedFile();
+        if (!target) {
+            addItem({
+                kind: "info",
+                text: "Ctrl+E: the agent hasn't touched any file yet this session.",
+            });
+            return;
+        }
+        editorBusy.current = true;
+        try {
+            await openInEditor(suspendTerminal, target.absPath);
+        }
+        finally {
+            editorBusy.current = false;
+        }
+    }, [suspendTerminal, undoStack, addItem]);
     useInput((_input, key) => {
         // Ctrl+K is the kill switch, and it comes before every other binding and
         // phase check on purpose: a panic button that only works from the idle
         // input line is not a panic button. It fires mid-stream, mid-tool, and
         // while a permission prompt is on screen.
         if (key.ctrl && _input === "k") {
-            noteCtrlChord(_input);
             if (killed)
                 return; // already stopped; /kill off is the way back
             engageKill("Ctrl+K");
@@ -239,10 +249,20 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
         }
         // Ctrl+O toggles showing full tool output.
         if (key.ctrl && _input === "o") {
-            noteCtrlChord(_input);
             setVerbose((v) => !v);
             return;
         }
+        // Ctrl+E opens the most recently agent-touched file in $EDITOR. Only
+        // from the idle prompt — never mid-turn, so the editor can't race the
+        // agent over the same file.
+        if (key.ctrl && _input === "e") {
+            if (phase !== "input") {
+                setActivity("Ctrl+E works from the idle prompt — stop the current turn first.");
+                return;
+            }
+            void openInEditorFlow();
+            return;
+        }
         // Shift+Tab cycles normal → accept-edits → plan → normal. Only from the
         // plain input state — not mid-permission-prompt, mid-resume-picker, etc.
         if (key.tab && key.shift && phase === "input") {
@@ -258,6 +278,15 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
                 onAcceptEditsConfirm(false);
             return;
         }
+        // First-time auto/bypass-mode confirmation: Yes proceeds, anything else cancels.
+        if (phase === "confirmBypassMode") {
+            const c = _input.toLowerCase();
+            if (c === "y" || key.return)
+                onBypassModeConfirm(true);
+            else if (c === "n" || key.escape)
+                onBypassModeConfirm(false);
+            return;
+        }
         // History recall with ↑/↓ when no autocomplete popup is open.
         if (phase === "input" && !suggestions.length && !fileSuggestions.length) {
             const hist = inputHistory.current;
@@ -320,6 +349,8 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
             planMode,
             acceptEdits,
             setAcceptEdits,
+            bypassMode,
+            setBypassMode,
             tokenBudget,
             budgetPct,
             budgetUsed,
@@ -349,7 +380,7 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
             costReport,
             statusReport,
             gitDiffStat,
-            exit,
+            exit: exitAfterFlush,
         };
         void runCommand(cmd, ctx);
     };
@@ -444,7 +475,7 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
             addItem({ kind: "info", text: `Attached ${images.length} image(s).` });
         await runAgent(await expandMentions(text), images);
     };
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item) => _jsx(TranscriptItem, { item: item, verbose: verbose, stdout: stdout }, item.id) }, staticKey), stream ? (_jsx(Box, { marginBottom: 1, children: _jsx(Markdown, { text: tailForViewport(stream, terminalColumns(stdout), terminalRows(stdout)), streaming: true }) })) : null, tasks.length > 0 && (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "blue", paddingX: 1, width: Math.min(terminalColumns(stdout) - 2, Math.max(...tasks.map((t) => stringWidth(t.text))) + 6), children: tasks.map((t, i) => (_jsxs(Text, { color: t.status === "done" ? "green" : t.status === "in_progress" ? "yellow" : undefined, dimColor: t.status === "pending", children: [t.status === "done" ? "☑" : t.status === "in_progress" ? "◐" : "☐", " ", t.text] }, i))) })), phase === "working" && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Spinner, { label: 
+    return (_jsxs(Box, { ref: rootRef, flexDirection: "column", children: [_jsx(Static, { items: items, children: (item) => (_jsx(TranscriptItem, { item: item, verbose: verbose, contentWidth: contentWidth }, item.id)) }), firstLaunch && items.length <= 1 && phase === "input" && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, paddingLeft: 2, children: [_jsx(Text, { dimColor: true, children: "Try asking:" }), _jsx(Text, { dimColor: true, children: " \u00B7 Explain this codebase" }), _jsx(Text, { dimColor: true, children: " \u00B7 Find and fix failing tests" }), _jsx(Text, { dimColor: true, children: " \u00B7 Review my uncommitted changes" }), _jsx(Text, { dimColor: true, children: " \u00B7 Add a new feature" }), _jsx(Text, { dimColor: true, children: " \u00B7 /help for commands" })] })), stream ? (_jsx(StreamViewport, { rows: rows, children: _jsx(Markdown, { text: stream, streaming: true, width: contentWidth }) })) : null, tasks.length > 0 && (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "blue", paddingX: 1, width: Math.min(columns - 2, Math.max(...tasks.map((t) => stringWidth(t.text))) + 6), children: tasks.map((t, i) => (_jsxs(Text, { color: t.status === "done" ? "green" : t.status === "in_progress" ? "yellow" : undefined, dimColor: t.status === "pending", children: [t.status === "done" ? "☑" : t.status === "in_progress" ? "◐" : "☐", " ", t.text] }, i))) })), phase === "working" && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Spinner, { label: 
                         // The workflow prefix rides on every branch, not just "thinking":
                         // during a phase you want to know which phase a tool call belongs
                         // to just as much as which phase is being reasoned about.
@@ -457,7 +488,7 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
                                         ? activity
                                         : thinking
                                             ? "thinking… (Esc to cancel)"
-                                            : "working… (Esc to cancel)") }), inFlight.length > 1 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: inFlight.map((t) => (_jsxs(Text, { dimColor: true, children: ["\u00B7 ", t.status ? `${t.summary} — ${t.status}` : t.summary] }, t.id))) })), _jsxs(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Text, { color: "yellow", children: "\u21B3 " }), _jsx(TextInput, { value: steerInput, onChange: (v) => setSteerInput((prev) => (isCtrlEcho(prev, v) ? prev : v)), onSubmit: (value) => {
+                                            : "working… (Esc to cancel)") }), inFlight.length > 1 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: inFlight.map((t) => (_jsxs(Text, { dimColor: true, children: ["\u00B7 ", t.status ? `${t.summary} — ${t.status}` : t.summary] }, t.id))) })), _jsxs(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [_jsx(Text, { color: "yellow", children: "\u21B3 " }), _jsx(TextInput, { value: steerInput, onChange: setSteerInput, onSubmit: (value) => {
                                     const text = value.trim();
                                     setSteerInput("");
                                     if (!text)
@@ -471,7 +502,7 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
                                     }
                                     addItem({ kind: "user", text: `${text} (queued)` });
                                     void expandMentions(text).then((t) => agent.queueSteer(t));
-                                }, placeholder: "steer the agent\u2026 (Enter to queue)" })] })] })), phase === "permission" && permission && (_jsx(PermissionPrompt, { toolName: permission.toolName, summary: permission.summary, diff: permission.diff, warning: permission.warning, onDecision: onPermissionDecision })), phase === "elicitation" && elicitation && (_jsx(ElicitationPrompt, { message: elicitation.message, fields: elicitation.fields, onDecision: onElicitationDecision })), phase === "confirmMode" && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { bold: true, color: "green", children: "Switch to accept-edits mode?" }), _jsx(Text, { children: "File writes and edits will auto-approve without asking." }), _jsx(Text, { dimColor: true, children: "Destructive shell commands (rm -rf, force-push, etc.) always still ask, in every mode." }), _jsx(Text, { dimColor: true, children: "Shift+Tab again moves to dry-run mode; once more back to normal." }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: "green", children: "Yes (y)" }), " \u00B7 No (n/Esc)"] }) })] })), phase === "model" && (_jsx(ModelPicker, { current: model, customModels: config.customModels ?? [], onSelect: (id) => {
+                                }, placeholder: "steer the agent\u2026 (Enter to queue)" })] })] })), phase === "permission" && permission && (_jsx(PermissionPrompt, { toolName: permission.toolName, summary: permission.summary, diff: permission.diff, warning: permission.warning, onDecision: onPermissionDecision })), phase === "elicitation" && elicitation && (_jsx(ElicitationPrompt, { message: elicitation.message, fields: elicitation.fields, onDecision: onElicitationDecision })), phase === "confirmMode" && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { bold: true, color: "green", children: "Switch to accept-edits mode?" }), _jsx(Text, { children: "File writes and edits will auto-approve without asking." }), _jsx(Text, { dimColor: true, children: "Destructive shell commands (rm -rf, force-push, etc.) always still ask, in every mode." }), _jsx(Text, { dimColor: true, children: "Shift+Tab again moves to dry-run mode; once more back to normal." }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: "green", children: "Yes (y)" }), " \u00B7 No (n/Esc)"] }) })] })), phase === "confirmBypassMode" && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 1, children: [_jsx(Text, { bold: true, color: "red", children: "Switch to auto mode? (sandbox-gated)" }), _jsx(Text, { children: "EVERY tool call will auto-approve, including destructive shell commands (rm -rf, force-push, etc.) \u2014 nothing will ask first." }), _jsx(Text, { dimColor: true, children: "The sandbox \u2014 not a human \u2014 is what contains any damage this mode causes." }), _jsx(Text, { dimColor: true, children: "Shift+Tab again goes back to normal." }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: "red", children: "Yes (y)" }), " \u00B7 No (n/Esc)"] }) })] })), phase === "model" && (_jsx(ModelPicker, { current: model, customModels: config.customModels ?? [], onSelect: (id) => {
                     setPhase("input");
                     setModelEverywhere(id);
                 }, onCancel: () => setPhase("input") })), phase === "resume" && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "magenta", children: ["Resume a session ", _jsx(Text, { dimColor: true, children: "(type to search \u00B7 Esc for a fresh one)" })] }), resumeFilter ? (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "filter: " }), resumeFilter] })) : null, _jsx(SelectList, { items: (resumeSessions ?? [])
@@ -482,7 +513,7 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
                             value: s.file,
                             hint: `${s.date} · ${s.count} msgs`,
                         })), onSelect: onResumeSelect, onCancel: () => onResumeSelect("") })] })), phase === "input" && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { color: "green", children: "\u276F " }), _jsx(TextInput, { value: input, onChange: (v) => {
-                                    setInput((prev) => (isCtrlEcho(prev, v) ? prev : v.replace(/\t/g, "")));
+                                    setInput(v.replace(/\t/g, ""));
                                     setCmdIndex(0);
                                     setFileIndex(0);
                                 }, onSubmit: handleSubmit }, inputKey)] }), suggestions.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [(() => {
@@ -496,7 +527,7 @@ export function App({ agent, workspace, modelRef, providerRef, config, resumedCo
                                     lastCategory = c.category;
                                     return (_jsxs(Fragment, { children: [showHeader && _jsx(Text, { dimColor: true, children: c.category ?? "Other" }), _jsxs(Text, { color: i === selectedCmd ? "cyan" : undefined, children: [i === selectedCmd ? "❯ " : "  ", _jsx(Text, { bold: i === selectedCmd, children: c.name }), _jsxs(Text, { dimColor: true, children: [" \u2014 ", c.description] })] })] }, c.name));
                                 });
-                            })(), _jsx(Text, { dimColor: true, children: "\u2191\u2193 select \u00B7 Tab/Enter select \u00B7 Enter again to run" })] })), fileSuggestions.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [fileSuggestions.map((f, i) => (_jsxs(Text, { color: i === selectedFile ? "cyan" : undefined, children: [i === selectedFile ? "❯ " : "  ", f] }, f))), _jsx(Text, { dimColor: true, children: "\u2191\u2193 select \u00B7 Tab/Enter attach file" })] }))] })), _jsx(Box, { children: _jsx(StatusLine, { killed: killed, killReason: killReason, dryRunMode: dryRunMode, planMode: planMode, acceptEdits: acceptEdits, autoApprovedCount: autoApprovedCount, provider: provider, model: servedModel && servedModel !== model
+                            })(), _jsx(Text, { dimColor: true, children: "\u2191\u2193 select \u00B7 Tab/Enter select \u00B7 Enter again to run" })] })), fileSuggestions.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [fileSuggestions.map((f, i) => (_jsxs(Text, { color: i === selectedFile ? "cyan" : undefined, children: [i === selectedFile ? "❯ " : "  ", f] }, f))), _jsx(Text, { dimColor: true, children: "\u2191\u2193 select \u00B7 Tab/Enter attach file" })] }))] })), _jsx(Box, { children: _jsx(StatusLine, { killed: killed, killReason: killReason, dryRunMode: dryRunMode, planMode: planMode, acceptEdits: acceptEdits, bypassMode: bypassMode, autoApprovedCount: autoApprovedCount, provider: provider, model: servedModel && servedModel !== model
                         ? `${model}-${modelDisplaySlug(servedModel)}`
                         : model, workflow: workflow, branch: branch, budgetPct: budgetPct, budgetStopped: budgetStopped, totalCost: totalCost, sandboxActive: (config.sandboxExec ?? defaultSandboxMode()) !== "off" && sandboxAvailable(), persistenceWarningCount: persistenceWarningCount, privacyMode: privacyMode }) })] }));
 }

package/dist/ui/ElicitationPrompt.js

@@ -1,7 +1,7 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
+import { TextInput } from "./TextInput.js";
 import { SelectList } from "./SelectList.js";
 /**
  * One field at a time, same reasoning as McpTrustPrompt's one-server-at-a-time

package/dist/ui/Markdown.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text, useWindowSize } from "ink";
 import stringWidth from "string-width";
 import { tokenizeLine } from "./highlight.js";
 import { parseInline, tokensWidth, wrapInline } from "./inline.js";
@@ -37,9 +37,9 @@ function Marked({ text, width, marker, indent, ...style }) {
  * bullets, quotes, rules, tables, and inline emphasis. Deliberately
  * lightweight — not a full implementation.
  */
-export function Markdown({ text, streaming = false }) {
-    const { stdout } = useStdout();
-    const width = Math.max(20, terminalColumns(stdout) - 2);
+export function Markdown({ text, streaming = false, width: measuredWidth, }) {
+    const windowSize = useWindowSize();
+    const width = Math.max(20, measuredWidth ?? terminalColumns(windowSize) - 2);
     const blocks = React.useMemo(() => renderBlocks(text, width, streaming), [text, width, streaming]);
     return _jsx(Box, { flexDirection: "column", children: blocks });
 }

package/dist/ui/McpTrustPrompt.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text } from "ink";
 import { SelectList } from "./SelectList.js";

package/dist/ui/PermissionPrompt.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput } from "ink";
 import { SelectList } from "./SelectList.js";
 const MAX_DIFF_LINES = 30;

package/dist/ui/SelectList.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
 export function SelectList({ items, onSelect, onCancel, }) {

package/dist/ui/Spinner.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Text } from "ink";
+import { Text, useAnimation } from "ink";
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+/** Milliseconds between frames — the spinner's twelve-frames-a-second beat. */
+const FRAME_INTERVAL_MS = 80;
+/**
+ * The spinner that turns beside the working… label. Ink drives this from one
+ * animation timer shared by the whole app — no private `setInterval` to own or
+ * clean up, and the beat comes from elapsed time, so a busy machine skips a
+ * frame instead of drifting late.
+ */
 export function Spinner({ label }) {
-    const [frame, setFrame] = useState(0);
-    useEffect(() => {
-        const timer = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), 80);
-        return () => clearInterval(timer);
-    }, []);
-    return (_jsxs(Text, { color: "yellow", children: [FRAMES[frame], " ", _jsx(Text, { dimColor: true, children: label })] }));
+    const { frame } = useAnimation({ interval: FRAME_INTERVAL_MS });
+    // `frame` counts up forever; the glyph list is what wraps it back around.
+    return (_jsxs(Text, { color: "yellow", children: [FRAMES[frame % FRAMES.length], " ", _jsx(Text, { dimColor: true, children: label })] }));
 }

package/dist/ui/StatusLine.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from "ink";
 import { displayModelId } from "../config/models.js";
 /**
@@ -8,12 +8,14 @@ import { displayModelId } from "../config/models.js";
  * moved to the on-demand `/status` command — see CommandContext.statusReport
  * in src/commands/registry.ts.
  */
-export function StatusLine({ killed, killReason, dryRunMode, planMode, acceptEdits, autoApprovedCount, provider, model, workflow, branch, budgetPct, budgetStopped, totalCost, sandboxActive, persistenceWarningCount, privacyMode, }) {
-    return (_jsxs(Text, { dimColor: true, children: [killed ? (_jsxs(Text, { bold: true, color: "red", children: ["\u26D4 KILLED", killReason ? ` (${killReason})` : "", " \u00B7", " "] })) : (""), _jsxs(Text, { color: dryRunMode || planMode ? "cyan" : acceptEdits ? "green" : undefined, children: ["mode:", " ", dryRunMode
-                        ? "dry-run"
-                        : planMode
-                            ? "plan"
-                            : acceptEdits
-                                ? `accept-edits (${autoApprovedCount} auto)`
-                                : "default", " · "] }), displayModelId(provider, model), _jsxs(Text, { color: sandboxActive ? "green" : "red", children: [" ", "\u00B7 ", sandboxActive ? "🔒 sandbox:active" : "🔓 sandbox:inactive"] }), workflow ? (_jsxs(Text, { color: "magenta", children: [" ", "\u00B7 \u2691 ", workflow.name, ":", workflow.phase] })) : (""), branch ? ` · ⎇ ${branch}` : "", budgetStopped || budgetPct >= 80 ? (_jsxs(Text, { color: budgetStopped ? "red" : "yellow", children: [" \u00B7 budget ", budgetPct, "%"] })) : (""), totalCost > 0 ? ` · $${totalCost.toFixed(4)}` : "", persistenceWarningCount > 0 ? (_jsxs(Text, { color: "yellow", children: [" \u00B7 \u26A0 persistence warnings: ", persistenceWarningCount] })) : (""), privacyMode ? _jsx(Text, { color: "cyan", children: " \u00B7 privacy:on" }) : "", " · /status for details"] }));
+export function StatusLine({ killed, killReason, dryRunMode, planMode, acceptEdits, bypassMode, autoApprovedCount, provider, model, workflow, branch, budgetPct, budgetStopped, totalCost, sandboxActive, persistenceWarningCount, privacyMode, }) {
+    return (_jsxs(Text, { dimColor: true, children: [killed ? (_jsxs(Text, { bold: true, color: "red", children: ["\u26D4 KILLED", killReason ? ` (${killReason})` : "", " \u00B7", " "] })) : (""), _jsxs(Text, { color: bypassMode ? "red" : dryRunMode || planMode ? "cyan" : acceptEdits ? "green" : undefined, children: ["mode:", " ", bypassMode
+                        ? `auto (${autoApprovedCount} auto)`
+                        : dryRunMode
+                            ? "dry-run"
+                            : planMode
+                                ? "plan"
+                                : acceptEdits
+                                    ? `accept-edits (${autoApprovedCount} auto)`
+                                    : "default", " · "] }), displayModelId(provider, model), _jsxs(Text, { color: sandboxActive ? "green" : "red", children: [" ", "\u00B7 ", sandboxActive ? "🔒 sandbox:active" : "🔓 sandbox:inactive"] }), workflow ? (_jsxs(Text, { color: "magenta", children: [" ", "\u00B7 \u2691 ", workflow.name, ":", workflow.phase] })) : (""), branch ? ` · ⎇ ${branch}` : "", budgetStopped || budgetPct >= 80 ? (_jsxs(Text, { color: budgetStopped ? "red" : "yellow", children: [" \u00B7 budget ", budgetPct, "%"] })) : (""), totalCost > 0 ? ` · $${totalCost.toFixed(4)}` : "", persistenceWarningCount > 0 ? (_jsxs(Text, { color: "yellow", children: [" \u00B7 \u26A0 persistence warnings: ", persistenceWarningCount] })) : (""), privacyMode ? _jsx(Text, { color: "cyan", children: " \u00B7 privacy:on" }) : "", " · /diff review · /undo revert · Ctrl+K stop · /status for details"] }));
 }

package/dist/ui/StreamViewport.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { streamRows } from "./viewport.js";
+/**
+ * Holds a streaming answer to the rows left under the live region, scrolling
+ * to its tail as it grows.
+ *
+ * Ink erases its live region by rewinding a line count, which can only reach
+ * what is still on screen. Let the streaming text grow past the terminal's
+ * height and the erase silently comes up short, stranding a partial copy in
+ * the scrollback — then the finished message prints below it and the answer
+ * appears twice. Capping the live region keeps the erase exact; the whole
+ * answer is printed once when the turn ends.
+ *
+ * This used to be done by hand: word-wrap every line to estimate the rows it
+ * would render at, then slice off the tail that didn't fit. Ink 8 renders
+ * `maxHeight` and `overflow="hidden"` natively, so the box does the capping.
+ *
+ * `justifyContent="flex-end"` is what pins the view to the tail: a column
+ * whose content overflows a capped height lines up against its end, keeping
+ * the newest text visible. It costs nothing while the answer still fits — the
+ * box is then only as tall as its content and the text grows downward as you
+ * would expect. `flexShrink={0}` on the content is what makes that work: Yoga
+ * would otherwise shrink the child back down to the cap, leaving the top on
+ * screen and the tail cut off.
+ */
+export function StreamViewport({ rows, children }) {
+    return (_jsx(Box, { flexDirection: "column", maxHeight: streamRows(rows), overflow: "hidden", justifyContent: "flex-end", marginBottom: 1, children: _jsx(Box, { flexDirection: "column", flexShrink: 0, children: children }) }));
+}

package/dist/ui/TextInput.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text, measureElement, useCursor, useInput, usePaste } from "ink";
+import stringWidth from "string-width";
+import wrapAnsi from "wrap-ansi";
+/**
+ * Where the caret lands in already-rendered text: the row and column the
+ * terminal cursor has to sit on once the text wraps.
+ *
+ * Wrapped with the very same call ink makes when it lays the text out
+ * (`wrapText` → `wrapAnsi(text, width, { trim: false, hard: true })`), so the
+ * two can't disagree about where a line breaks. Re-deriving the break point by
+ * dividing the column count would: `wrapAnsi` leaves the space that ends a
+ * wrapped line on that line, so a greedy wrapper lands the next line one column
+ * to the left and the caret drifts a cell per wrap.
+ *
+ * One deliberate approximation: a line that fills the width exactly reports
+ * `col === width`, i.e. the column just past its last character. That is where
+ * the terminal's own pending-wrap cursor sits, and the alternative — jumping to
+ * column 0 of the following row — is just as defensible and just as wrong the
+ * other half of the time.
+ */
+export function caretAt(before, width) {
+    const lines = wrapAnsi(before, Math.max(1, width), { trim: false, hard: true }).split("\n");
+    const last = lines[lines.length - 1] ?? "";
+    return { row: lines.length - 1, col: stringWidth(last) };
+}
+/**
+ * The prompt's text field.
+ *
+ * Hand-rolled rather than borrowed from ink-text-input, for two reasons that
+ * both come down to ink 8 finally exposing the terminal cursor. `useCursor`
+ * puts the *real* cursor at the caret, which is what an IME needs to place its
+ * composition popup — ink-text-input fakes the cursor with a reverse-video
+ * character, so typing Chinese, Japanese or Korean puts the popup in the wrong
+ * place. And `usePaste` turns on bracketed paste, so a pasted block arrives as
+ * one marked string we can normalize, instead of a run of raw keystrokes whose
+ * carriage returns survive into the prompt and into the message sent to the
+ * model.
+ */
+export function TextInput({ value, onChange, onSubmit, placeholder, mask, isActive = true, }) {
+    const [cursor, setCursorOffset] = useState(value.length);
+    const [origin, setOrigin] = useState(null);
+    const boxRef = useRef(null);
+    const { setCursorPosition } = useCursor();
+    // The caller owns the value, so it can move under us — cleared on submit,
+    // replaced by history recall. Clamping during render rather than in an effect
+    // keeps the caret correct in the same pass.
+    const offset = Math.min(cursor, value.length);
+    const display = mask ? mask.repeat(value.length) : value;
+    const beforeCaret = mask ? mask.repeat(offset) : display.slice(0, offset);
+    // Re-measure after every commit; setOrigin bails out when nothing moved, so
+    // a steady prompt re-renders zero extra times. Ink computes layout in
+    // resetAfterCommit, which runs *before* layout effects, so the first pass
+    // already sees a real layout. The zero check is belt and braces: a Box that
+    // genuinely has no room yet should leave the cursor hidden rather than pin it
+    // to the terminal origin.
+    useLayoutEffect(() => {
+        const node = boxRef.current;
+        if (!node)
+            return;
+        const { x, y, clientWidth } = measureElement(node);
+        if (clientWidth === 0)
+            return;
+        setOrigin((prev) => prev && prev.x === x && prev.y === y && prev.width === clientWidth
+            ? prev
+            : { x, y, width: clientWidth });
+    });
+    // Publishing the caret has to happen during render. useCursor() forwards it
+    // from an insertion effect, which runs *before* layout effects, so a position
+    // set from an effect would always reach the terminal one render late — and a
+    // cursor that trails the caret by a keystroke is worse than none for an IME.
+    if (isActive && origin) {
+        const { row, col } = caretAt(beforeCaret, Math.max(1, origin.width));
+        setCursorPosition({ x: origin.x + col, y: origin.y + row });
+    }
+    else {
+        setCursorPosition(undefined);
+    }
+    useInput((input, key) => {
+        // Ctrl/meta chords are the app's shortcuts (Ctrl+K kill switch, Ctrl+O
+        // verbose), never text. Swallowing them here is what stops them being
+        // typed into the box as a bare letter.
+        if (key.ctrl || key.meta)
+            return;
+        // Keys the surrounding app owns: up/down drive suggestions and history,
+        // Tab completes, Escape cancels.
+        if (key.upArrow || key.downArrow || key.tab || key.escape)
+            return;
+        if (key.return) {
+            onSubmit?.(value);
+            return;
+        }
+        if (key.leftArrow) {
+            setCursorOffset(Math.max(0, offset - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            setCursorOffset(Math.min(value.length, offset + 1));
+            return;
+        }
+        if (key.home) {
+            setCursorOffset(0);
+            return;
+        }
+        if (key.end) {
+            setCursorOffset(value.length);
+            return;
+        }
+        // Ink reports these separately — backspace is DEL, forward-delete is
+        // CSI 3~ — so they delete on opposite sides of the caret.
+        if (key.backspace) {
+            if (offset === 0)
+                return;
+            onChange(value.slice(0, offset - 1) + value.slice(offset));
+            setCursorOffset(offset - 1);
+            return;
+        }
+        if (key.delete) {
+            if (offset >= value.length)
+                return;
+            onChange(value.slice(0, offset) + value.slice(offset + 1));
+            return;
+        }
+        if (!input)
+            return;
+        // Bracketed paste normally routes to usePaste below. A terminal without
+        // it still delivers the block here, so normalize on both paths.
+        const inserted = input.replace(/\r\n?/g, "\n");
+        onChange(value.slice(0, offset) + inserted + value.slice(offset));
+        setCursorOffset(offset + inserted.length);
+    }, { isActive });
+    usePaste((text) => {
+        const inserted = text.replace(/\r\n?/g, "\n");
+        onChange(value.slice(0, offset) + inserted + value.slice(offset));
+        setCursorOffset(offset + inserted.length);
+    }, { isActive });
+    return (_jsx(Box, { ref: boxRef, flexGrow: 1, children: value.length === 0 && placeholder ? (_jsx(Text, { dimColor: true, children: placeholder })) : (_jsx(Text, { children: display })) }));
+}