agent-from-zero 0.34.2 → 0.35.1

package/dist/ink/app.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { statusCommand } from "../status.js";
 import React, { useState, useEffect, useRef } from "react";
 import { Box, Text, Static, useInput, useApp } from "ink";
 import chalk from "chalk";
@@ -6,14 +7,16 @@ import { formatElapsed, renderMenu, MENU_HINT, formatModelChoices } from "../ui.
 import { renderMarkdown } from "../markdown.js"; // model speaks markdown → ANSI, same as the non-Ink REPL
 import { initFormState, reduceForm, renderForm, collectAnswers } from "../form.js"; // the ask_user form: pure state machine + renderer
 import { CONFIG, saveGlobalSetting } from "../config.js"; // session allowlist + /model save
-import { TerminateReason, listSubAgents } from "../loop.js"; // how a turn can end
+import { effortMenu, setEffort } from "../effort.js";
+import { useSlashCompletion } from "./completion.js";
+import { TerminateReason, listAgentViews } from "../loop.js"; // how a turn can end
 import { compactHistory, COMPACT_AT } from "../context.js"; // /compact
 import { forgetFilesExcept } from "../tools.js"; // /clear resets the file read-state
 import { clearUndo } from "../undo.js";
 import { clearTodos } from "../todos.js";
 import { resetTeam } from "../team.js";
 import { resetBoard } from "../board.js";
-import { clearReasoning, clearToolCalls, getReasoning, getToolCalls, cleanup as tuiCleanup } from "../tui.js";
+import { clearReasoning, clearToolCalls, getReasoning, getToolCalls, getToolActivity, getToolCallCount, cleanup as tuiCleanup } from "../tui.js";
 import { expandMentions } from "../mentions.js"; // @file mentions → attach file contents
 import { normalizeDroppedPaths } from "../drop.js"; // drag-and-drop a file → its absolute path in the input
 import { cronItemsPending, consumeCronQueue, cronTriggerContent } from "../cron.js"; // cron scheduler (Day s14): fire scheduled jobs autonomously while idle
@@ -25,12 +28,19 @@ import { extractMemories } from "../memory.js";
 import { displayWidth } from "../editor.js"; // display-width measurement (CJK-aware)
 import { runHooks } from "../hooks.js";
 import { emit } from "../telemetry.js";
+import { reviewDebugCommand } from "../auto-debug.js";
+import { readClipboard, imageLabel, imagesInInput, userContent, MAX_IMAGES } from "../images.js";
+import { FollowUpQueue } from "../follow-up.js";
+import { PastedTextStore } from "../pasted-text.js";
+import { AgentList, moveAgentFocus } from "./agents.js";
+import { detailPage, summarizeActivity } from "./activity.js";
+import { useTerminalSize } from "./viewport.js";
 import { makeInkSink } from "./sink.js"; // turns the loop's output into React state
 import { runInfoCommand, mcpStatusText } from "./commands.js"; // the non-interactive slash commands + /mcp status
 import { listMcpServers, mcpActionsFor, runMcpAction } from "../mcp.js"; // /mcp: list + per-server actions
 // Injected when plan mode turns on, so the model knows the rules it now lives in.
 const PLAN_MODE_NOTICE = `[plan mode ON] Investigate this request using only read-only tools — read_file, search, and safe read-only shell (ls, cat, git status). Do NOT write files, edit, or run mutating commands; the permission gate will block them. When you have a concrete, ordered plan, call the exit_plan_mode tool with that plan. The user reviews and approves it before you make any change.`;
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]; // the braille spinner ora uses, hand-rolled for Ink
+const SPINNER_FRAMES = ["·", "✢", "✳", "✶", "✻", "✽", "✻", "✶", "✳", "✢"];
 // Cap the live streaming preview to a terminal-aware tail. THIS IS LOAD-BEARING:
 // Ink redraws the whole dynamic region (everything below <Static>) on every
 // token, and when that region grows TALLER than the terminal, Ink can no longer
@@ -38,28 +48,21 @@ const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧",
 // and the cursor math drifts (sudden blank gaps). So we never let the in-flight
 // answer render more than the rows we can spare; the FULL reply still commits to
 // <Static> (formatted as markdown) the moment it finishes.
-function liveTail(s) {
-    const rows = process.stdout.rows || 24;
+function liveTail(s, rows, columns, queued) {
     // 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;
-    const lines = t.split("\n");
-    const clipped = s.length > maxChars || lines.length > maxLines;
-    if (lines.length > maxLines)
-        t = lines.slice(-maxLines).join("\n");
-    return clipped ? "… " + t : t; // a leading ellipsis signals there's more above (it's all in the scrollback on commit)
+    const maxLines = Math.max(1, Math.min(10, rows - (queued ? 26 : 20)));
+    const page = detailPage(s, 0, maxLines, Math.max(1, columns - 2));
+    return (page.pages > 1 ? "… " : "") + page.text;
 }
 function Spinner() {
     const [f, setF] = useState(0);
     useEffect(() => {
-        const id = setInterval(() => setF((x) => (x + 1) % SPINNER_FRAMES.length), 80);
+        const id = setInterval(() => setF((x) => (x + 1) % SPINNER_FRAMES.length), 120);
         return () => clearInterval(id);
     }, []);
-    return _jsx(Text, { color: "cyan", children: SPINNER_FRAMES[f] });
+    return _jsx(Text, { color: "#D77757", children: SPINNER_FRAMES[f] });
 }
 // One committed line of conversation. `user` is a highlight bar; `answer` is a
 // finished reply rendered as markdown; `note` is already-formatted narration.
@@ -83,36 +86,53 @@ function StatusBar({ model, dir, branch, status }) {
         _jsxs(Text, { color: "yellow", children: ["$", status.cost.toFixed(status.cost < 1 ? 4 : 2)] }, "$"),
         _jsxs(Text, { dimColor: true, children: ["\u23F1 ", formatElapsed(status.elapsedMs)] }, "t"),
     ];
-    return (_jsx(Box, { children: parts.map((p, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: "  ·  " }), p] }, i))) }));
+    return (_jsx(Text, { wrap: "truncate-end", children: parts.map((p, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: "  ·  " }), p] }, i))) }));
 }
 // One human note per non-Done ending, so the user always learns why a turn stopped.
 const EXIT_NOTES = {
+    [TerminateReason.ReviewLimit]: "Repeated automatic denials — stopped. Tell the agent how to proceed; prohibited actions were not executed.",
     [TerminateReason.CircuitBreaker]: "3 API failures in a row — stopping here.",
     [TerminateReason.RetryBudgetExhausted]: "Too many failed API calls — giving up. Check your network.",
     [TerminateReason.RateLimitBudgetExhausted]: "The provider keeps rate-limiting us. Wait a minute, then retry.",
     [TerminateReason.ContextTooLong]: "The conversation no longer fits the context window. Use /clear.",
     [TerminateReason.CompactionFailed]: "Automatic compaction kept failing. Use /clear to start fresh.",
+    [TerminateReason.ImageInputRejected]: "The provider rejected this image request. Check image limits and use /model to select a vision-capable model at your current vendor, then retry (images remain in the conversation).",
     [TerminateReason.FatalApiError]: "Unrecoverable API error — check your API key and request.",
     [TerminateReason.UserInterrupt]: "Interrupted — back at the prompt.",
 };
-export function App({ session, runTurn }) {
-    const { client, messages, systemMessage, costMeter, skills, judge, model, dir, branch, getStatus } = session;
+export function App({ session, runTurn, clipboard }) {
+    const { rows, columns } = useTerminalSize();
+    const { client, messages, systemMessage, costMeter, skills, judge, autoMode, model, dir, branch, getStatus } = session;
     // Seed the scrollback with the welcome banner + the dim startup notices.
     const [items, setItems] = useState(() => [{ kind: "note", text: session.bannerText }, ...session.notices.map((n) => ({ kind: "note", text: chalk.dim(n) }))]);
     const [status, setStatus] = useState(null); // the live spinner line
+    const [details, setDetails] = useState(null);
+    const [detailOffset, setDetailOffset] = useState(0);
     const [live, setLive] = useState(null); // the streaming answer
     const [input, setInput] = useState(""); // the current input buffer
+    const [images, setImages] = useState([]);
+    const pasting = useRef(false);
+    const imageSeq = useRef(0);
+    const pastedTexts = useRef(new PastedTextStore()).current;
     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 [pending, setPending] = useState(null); // a prompt/menu awaiting a choice or follow-up
+    const [completionModels, setCompletionModels] = useState([]);
+    const modelListEndpoint = useRef(null);
     const [menuSel, setMenuSel] = useState(0); // the select menu's cursor
     const [formState, setFormState] = useState(null); // the ask_user form's state
     const [sessionId, setSessionId] = useState(session.initialSessionId); // changes on /clear, /resume
     const [planMode, setPlan] = useState(isPlanMode()); // mirrored into the prompt frame
+    const [autoEnabled, setAutoEnabled] = useState(autoMode.enabled);
     const [histIdx, setHistIdx] = useState(null); // ↑/↓ recall position (null = editing a fresh line)
     const [subAgentFocus, setSubAgentFocus] = useState(null); // which sub-agent is highlighted (null = none)
+    const [agentPage, setAgentPage] = useState(0);
     const [subAgentDetail, setSubAgentDetail] = useState(null); // the id of the sub-agent whose output is shown in detail
     const [, setTick] = useState(0); // forces a re-render once a second so the clock / cost tick
+    const followUps = useRef(new FollowUpQueue(() => setTick((t) => t + 1))).current;
+    const submitting = useRef(false);
+    const statusRequest = useRef(null);
+    useEffect(() => () => statusRequest.current?.abort(), []);
     const { exit } = useApp();
     const pushItem = useRef((it) => setItems((xs) => [...xs, it])).current;
     const note = (text) => pushItem({ kind: "note", text });
@@ -121,6 +141,17 @@ export function App({ session, runTurn }) {
     const turn = useRef(null); // the in-flight turn, for Esc-interrupt
     const titleAttempted = useRef(false); // one-shot: name the session once, after the first real message
     const pendingTitle = useRef(undefined); // the generated title, passed into the next save
+    const completing = !busy && !pending && !details && subAgentFocus === null && !subAgentDetail;
+    const wantsModels = completing && /^\/model(?:\s|$)/.test(input);
+    useEffect(() => {
+        if (!wantsModels || modelListEndpoint.current === CONFIG.baseURL)
+            return;
+        modelListEndpoint.current = CONFIG.baseURL;
+        void client.models.list().then((page) => setCompletionModels(page.data.map((m) => m.id))).catch(() => { });
+    }, [wantsModels, client]);
+    const completion = useSlashCompletion(input, completing, {
+        model: CONFIG.model, skills, models: completionModels, servers: listMcpServers().map((s) => s.name),
+    }, rows - 10);
     useEffect(() => {
         const id = setInterval(() => setTick((t) => t + 1), 1000);
         return () => clearInterval(id);
@@ -132,6 +163,7 @@ export function App({ session, runTurn }) {
     }, [session.initialTitle]);
     // Open a one-of-N menu and run `onChoose` with the picked index (-1 = cancel).
     const openSelect = (header, options, onChoose) => {
+        setDetails(null);
         setMenuSel(0);
         setPending({ kind: "select", header, options, onChoose });
     };
@@ -139,8 +171,11 @@ export function App({ session, runTurn }) {
     // as the prompt (a user highlight bar, or a note for /skill); the loop appends
     // `content` to `messages` itself. The permission menu + ask_user form raise a
     // `pending` prompt that returns a promise the loop awaits.
-    const runConversationTurn = (content, display) => {
-        pushItem(display);
+    const runConversationTurn = (content, display, attachments = []) => {
+        setDetails(null);
+        setDetailOffset(0);
+        if (display)
+            pushItem(display);
         clearReasoning(); // Ctrl+R should reveal THIS turn's thinking
         clearToolCalls(); // ...and Ctrl+T THIS turn's tool calls
         setBusy(true);
@@ -148,12 +183,14 @@ export function App({ session, runTurn }) {
         const tstate = { controller, interrupted: false };
         turn.current = tstate; // expose it so Esc can interrupt this turn
         const hooks = {
+            images: attachments,
             output: sink,
             confirm: (question, toolName) => new Promise((resolve) => {
                 const allowLabel = toolName ? `Yes, and don't ask again for ${toolName} this session` : "Yes, and don't ask again this session";
-                openSelect(`⚠ approval needed — ${question}`, ["Yes", allowLabel, "No — let me tell the agent what to do instead"], (i) => {
-                    const approved = i === 0 || i === 1;
-                    if (approved && i === 1 && toolName)
+                const options = autoMode.enabled ? ["Yes, once", "No — let me tell the agent what to do instead"] : ["Yes", allowLabel, "No — let me tell the agent what to do instead"];
+                openSelect(`⚠ approval needed — ${question}`, options, (i) => {
+                    const approved = i === 0 || (!autoMode.enabled && i === 1);
+                    if (!autoMode.enabled && approved && i === 1 && toolName)
                         CONFIG.permissions.allow.push(`tool:${toolName}`); // "don't ask again" → session allowlist
                     note(`${chalk.yellow("⚠ approval")} — ${question.split("\n")[0]} → ${approved ? chalk.green("✓ approved") : chalk.yellow("✗ declined")}`);
                     resolve(approved);
@@ -162,16 +199,20 @@ export function App({ session, runTurn }) {
             askUser: (questions) => new Promise((resolve) => {
                 if (!questions.length)
                     return resolve(null);
+                setDetails(null);
                 setFormState(initFormState(questions));
                 setPending({ kind: "form", questions, resolve });
             }),
             signal: controller.signal,
             isInterrupted: () => tstate.interrupted, // polled between steps for a clean stop
             judge,
+            autoMode,
+            followUps,
+            onFollowUp: (text) => pushItem({ kind: "user", text }),
         };
         runTurn(content, hooks)
             .then(async (result) => {
-            if (result.reason !== TerminateReason.Done)
+            if (result.reason !== TerminateReason.Done && !(result.reason === TerminateReason.UserInterrupt && followUps.size))
                 note(chalk.yellow(`⚠️ ${EXIT_NOTES[result.reason] ?? result.reason}`));
             saveSession(sessionId, model, messages, pendingTitle.current); // snapshot after every turn — crash-safe by construction
             if (CONFIG.memory.autoExtract && result.reason === TerminateReason.Done) {
@@ -193,6 +234,12 @@ export function App({ session, runTurn }) {
             setLive(null);
         });
     };
+    // Covers immediate interruption and a message arriving as the turn finishes.
+    // The queue survives the old turn; the new controller has a fresh abort signal.
+    useEffect(() => {
+        if (!busy && !pending && !turn.current && followUps.size)
+            runConversationTurn(null);
+    });
     // The cron IDLE PROCESSOR (Day s14): the scheduler fires jobs into a queue, but
     // injectCronMessages only drains it mid-turn — so a job that fires while you're
     // at the prompt would never run on its own. Here, while idle (no turn, no menu),
@@ -201,8 +248,8 @@ export function App({ session, runTurn }) {
     // Effect re-subscribes on busy/pending changes so the closure always sees the
     // current `runConversationTurn`; it only installs the poll when truly idle.
     useEffect(() => {
-        if (busy || pending)
-            return; // only fire scheduled work when the agent is idle
+        if (busy || pending || followUps.size)
+            return; // human follow-ups take priority
         const id = setInterval(() => {
             if (!cronItemsPending())
                 return;
@@ -218,11 +265,16 @@ export function App({ session, runTurn }) {
     }, [busy, pending]);
     // A normal (non-command) prompt: run UserPromptSubmit hooks, expand @file
     // mentions, then start the turn. Mirrors agent.ts's submit path.
-    const submitLine = async (text) => {
-        if (text === "exit" || text === "quit")
+    const submitLine = async (draft, attachments = [], immediate = false) => {
+        if (!pending && turn.current && (draft.startsWith("/") || draft === "exit" || draft === "quit")) {
+            note(chalk.dim("Commands are available when the agent is idle; use Esc to interrupt."));
+            return;
+        }
+        if (!pending && (draft === "exit" || draft === "quit"))
             return doExit();
-        if (await handleCommand(text))
-            return; // slash commands never reach the model
+        if (!pending && await handleCommand(draft))
+            return;
+        const text = pastedTexts.expand(draft);
         const hook = await runHooks("UserPromptSubmit", { prompt: text });
         if (hook.block)
             return note(chalk.yellow(`(prompt blocked by a UserPromptSubmit hook: ${hook.feedback.slice(0, 150)})`));
@@ -253,7 +305,32 @@ export function App({ session, runTurn }) {
                     .catch(() => { });
             }
         }
-        runConversationTurn(augmented + injected, { kind: "user", text }); // show the original line; send the augmented content
+        if (pending || turn.current || followUps.size) {
+            followUps.enqueue({ text, displayText: draft, content: userContent(augmented + injected, attachments) });
+            // Queue FIRST, then release the blocked tool without approving it. The
+            // loop consumes the new instruction at its next tool boundary.
+            if (pending) {
+                setPending(null);
+                setFormState(null);
+                if (pending.kind === "form")
+                    pending.resolve(null);
+                else
+                    pending.onChoose(-1);
+            }
+            if (immediate)
+                interruptForFollowUp();
+            return;
+        }
+        autoMode.recordRequest(text); // before attached files or hook output can masquerade as user intent
+        runConversationTurn(augmented + injected, { kind: "user", text: draft }, attachments);
+    };
+    const interruptForFollowUp = () => {
+        const current = turn.current;
+        if (!current || current.interrupted || !followUps.size)
+            return;
+        current.interrupted = true;
+        current.controller.abort();
+        note(chalk.dim("(interrupting the current step to process your follow-up)"));
     };
     // Handle a /slash command. Returns true if the line was a command (handled).
     // /mcp — list configured servers + status, then pick one to manage it.
@@ -299,6 +376,48 @@ export function App({ session, runTurn }) {
         });
     };
     const handleCommand = async (line) => {
+        if (line === "/status" || line.startsWith("/status ")) {
+            const controller = new AbortController();
+            statusRequest.current = controller;
+            setBusy(true);
+            setStatus("Checking account usage… (Esc to cancel)");
+            try {
+                note(await statusCommand(line, costMeter, { signal: controller.signal, columns }));
+            }
+            finally {
+                statusRequest.current = null;
+                setBusy(false);
+                setStatus(null);
+            }
+            return true;
+        }
+        if (line.startsWith("/skills "))
+            line = `/skill ${line.slice(8).trim()}`;
+        if (line === "/effort" || line.startsWith("/effort ")) {
+            const target = CONFIG.model;
+            const value = line.slice("/effort".length).trim();
+            if (value)
+                note(setEffort(target, value));
+            else {
+                const menu = effortMenu(target);
+                if (!menu.values.length)
+                    note(menu.header);
+                else
+                    openSelect(menu.header, menu.labels, (i) => { if (i >= 0)
+                        note(setEffort(target, menu.values[i])); });
+            }
+            return true;
+        }
+        const debug = reviewDebugCommand(line);
+        if (debug !== null) {
+            note(chalk.dim(debug));
+            return true;
+        }
+        if (line === "/auto") {
+            note(chalk.dim(autoMode.toggle()));
+            setAutoEnabled(autoMode.enabled);
+            return true;
+        }
         const info = runInfoCommand(line, { skills, costMeter }); // /help /cost /memory /stats /todos /bg /team /tasks /skills /undo /diff
         if (info !== null) {
             note(info);
@@ -361,11 +480,13 @@ export function App({ session, runTurn }) {
                 note(chalk.yellow(`(no skill named "${name}")`));
                 return true;
             }
+            autoMode.recordRequest(`Run the "${s.name}" skill.`);
             runConversationTurn(`Run the "${s.name}" skill.\n\n${skillInstructions(s)}`, { kind: "note", text: chalk.dim(`(running skill: ${s.name})`) });
             return true;
         }
         switch (line) {
             case "/clear":
+                autoMode.clearRequests();
                 messages.length = 0; // mutate in place — same array ref the loop holds
                 messages.push({ role: "system", content: systemMessage });
                 forgetFilesExcept([]);
@@ -425,6 +546,7 @@ export function App({ session, runTurn }) {
                     if (!chosen)
                         return note(chalk.yellow("(could not load that session — it may be corrupt)"));
                     messages.length = 0;
+                    autoMode.clearRequests();
                     messages.push({ role: "system", content: systemMessage }, ...chosen.messages);
                     setSessionId(chosen.id);
                     titleAttempted.current = false; // a resumed session without a title gets one on its next message
@@ -464,20 +586,80 @@ export function App({ session, runTurn }) {
             tuiCleanup();
             return exit(); // Ctrl+C quits immediately (process.on exit cleans up MCP/background)
         }
-        // Ctrl+R / Ctrl+T: reveal the LAST answer's collapsed thinking / tool calls.
-        if (key.ctrl && char === "r")
-            return note(getReasoning() ?? chalk.dim("(no thinking recorded for the last answer)"));
-        if (key.ctrl && char === "t")
-            return note(getToolCalls() ?? chalk.dim("(no tool calls recorded for the last answer)"));
+        const modifiedReturn = char === "[13;5u" || char === "[27;5;13~";
+        // A submitted follow-up may still be passing hooks. A second Enter must
+        // not approve the old action while that asynchronous preparation runs.
+        if (pending && submitting.current && (key.return || modifiedReturn || key.escape || key.upArrow || key.downArrow))
+            return;
+        if (key.ctrl && char === "v" && subAgentFocus === null) {
+            if (pasting.current)
+                return;
+            pasting.current = true;
+            const id = ++imageSeq.current;
+            void readClipboard(id, clipboard).then((clipboard) => {
+                if (clipboard.image) {
+                    if (imagesInInput(input, images).length >= MAX_IMAGES) {
+                        note(chalk.yellow(`Attach at most ${MAX_IMAGES} images per message.`));
+                        return;
+                    }
+                    const label = imageLabel(id);
+                    setImages((current) => [...imagesInInput(input, current), clipboard.image]);
+                    setInput((current) => current.slice(0, cursor) + label + current.slice(cursor));
+                    setCursor(cursor + label.length);
+                }
+                else if (clipboard.text) {
+                    const text = pastedTexts.fold(clipboard.text);
+                    setInput((current) => current.slice(0, cursor) + text + current.slice(cursor));
+                    setCursor(cursor + text.length);
+                }
+                else
+                    note(chalk.dim("Clipboard has no image or text."));
+            }).catch(() => note(chalk.yellow("Could not read the clipboard. Check clipboard access and image size (5 MB max). Linux requires wl-paste or xclip.")))
+                .finally(() => { pasting.current = false; });
+            return;
+        }
+        if (pasting.current)
+            return; // keep the insertion position stable during native clipboard access
+        // Details stay in the transient viewport: toggling never appends history.
+        if (!pending && key.ctrl && (char === "r" || char === "t")) {
+            const next = char === "t" ? "tools" : "reasoning";
+            setDetails((current) => current === next ? null : next);
+            setDetailOffset(0);
+            setSubAgentDetail(null);
+            setSubAgentFocus(null);
+            return;
+        }
+        if (details && !pending) {
+            if (key.escape) {
+                setDetails(null);
+                return;
+            }
+            if (key.pageUp || key.upArrow) {
+                setDetailOffset((n) => Math.min(n + 1, detailView.pages - 1));
+                return;
+            }
+            if (key.pageDown || key.downArrow) {
+                setDetailOffset((n) => Math.max(0, n - 1));
+                return;
+            }
+        }
         // Esc while a sub-agent detail is open: close it, don't interrupt.
-        if (key.escape && subAgentDetail && !pending) {
+        if (key.escape && (subAgentDetail || subAgentFocus !== null) && !pending) {
             setSubAgentDetail(null);
             setSubAgentFocus(null);
             return;
         }
         // Esc while a turn runs (and no menu is up): interrupt it — like the first
         // Ctrl+C of the readline REPL, without the force-quit escalation.
+        if (key.escape && statusRequest.current) {
+            statusRequest.current.abort();
+            return;
+        }
         if (key.escape && busy && !pending) {
+            if (followUps.size) {
+                interruptForFollowUp();
+                return;
+            }
             const t = turn.current;
             if (t && !t.interrupted) {
                 t.interrupted = true; // the loop polls this between steps
@@ -489,25 +671,33 @@ export function App({ session, runTurn }) {
         // A select menu is up (approval / model / resume): ↑↓ move, Enter choose, Esc cancel.
         if (pending?.kind === "select") {
             const n = pending.options.length;
-            if (key.upArrow)
+            if (key.upArrow) {
                 setMenuSel((i) => (i - 1 + n) % n);
-            else if (key.downArrow)
+                return;
+            }
+            else if (key.downArrow) {
                 setMenuSel((i) => (i + 1) % n);
-            else if (key.return || key.escape) {
+                return;
+            }
+            else if (((key.return || modifiedReturn) && !input.trim()) || key.escape) {
                 const choice = key.escape ? -1 : menuSel;
                 const onChoose = pending.onChoose;
                 setPending(null);
                 onChoose(choice);
+                return;
             }
-            return;
         }
         // The ask_user form is up: reuse form.ts's pure state machine verbatim.
         if (pending?.kind === "form" && formState) {
-            if (key.upArrow)
+            if (key.upArrow) {
                 setFormState(reduceForm(pending.questions, formState, "up").state);
-            else if (key.downArrow || key.tab)
+                return;
+            }
+            else if (key.downArrow || key.tab) {
                 setFormState(reduceForm(pending.questions, formState, "down").state);
-            else if (key.return || char === " ") {
+                return;
+            }
+            else if ((key.return || modifiedReturn) && !input.trim()) {
                 const next = reduceForm(pending.questions, formState, "select");
                 setFormState(next.state);
                 if (next.done) {
@@ -515,76 +705,89 @@ export function App({ session, runTurn }) {
                     setPending(null);
                     setFormState(null);
                 }
+                return;
             }
             else if (key.escape) {
                 pending.resolve(null);
                 setPending(null);
                 setFormState(null);
+                return;
             }
-            return;
         }
-        // Tab / Shift+Tab: cycle through the sub-agent list below the input box.
-        // Enter on a highlighted sub-agent toggles its detail view.
-        const agents = listSubAgents();
-        if (agents.length > 0 && !key.return && key.tab) {
-            const back = key.shift; // Shift+Tab = go backwards
-            if (subAgentDetail) {
-                // Detail open: Tab moves to next + closes detail.
-                setSubAgentDetail(null);
-                setSubAgentFocus((prev) => {
-                    const n = agents.length;
-                    if (back) {
-                        const next = prev === null ? n - 1 : (prev - 1 + n) % n;
-                        return next;
-                    }
-                    const next = prev === null ? 0 : (prev + 1) % n;
-                    return next;
-                });
+        const completionAction = completion.handleKey(key, (value) => { setInput(value); setCursor(value.length); setHistIdx(null); });
+        if (completionAction.handled && !completionAction.submit)
+            return;
+        // Agent navigation has its own focus. Typing/history keeps arrow keys
+        // until Tab, left at the input boundary, or down from an empty input.
+        const ids = ["main", ...listAgentViews().map((a) => a.id)];
+        if (!pending && ids.length > 1) {
+            if (subAgentFocus !== null) {
+                if (key.escape || key.rightArrow) {
+                    setSubAgentFocus(null);
+                    setSubAgentDetail(null);
+                    return;
+                }
+                if (key.upArrow || key.downArrow || key.tab) {
+                    const next = moveAgentFocus(ids, subAgentFocus, key.upArrow || (key.tab && key.shift) ? -1 : 1);
+                    setSubAgentFocus(next);
+                    if (subAgentDetail)
+                        setSubAgentDetail(next === "main" ? null : next);
+                    setAgentPage(0);
+                    return;
+                }
+                if (key.pageUp || key.pageDown) {
+                    setAgentPage((n) => Math.max(0, Math.min(agentDetailView.pages - 1, n + (key.pageUp ? 1 : -1))));
+                    return;
+                }
+                if (key.return) {
+                    setSubAgentDetail(subAgentFocus === "main" ? null : subAgentFocus);
+                    if (subAgentFocus === "main")
+                        setSubAgentFocus(null);
+                    setDetails(null);
+                    setAgentPage(0);
+                    return;
+                }
+                return; // the input buffer stays untouched while selecting an agent
             }
-            else {
-                setSubAgentDetail(null);
-                setSubAgentFocus((prev) => {
-                    const n = agents.length;
-                    if (back) {
-                        if (prev === null)
-                            return n - 1;
-                        const next = (prev - 1 + n) % n;
-                        return next === n - 1 ? null : next;
-                    }
-                    if (prev === null)
-                        return 0;
-                    const next = (prev + 1) % n;
-                    return next === 0 ? null : next;
-                });
+            if (key.tab || (key.leftArrow && cursor === 0) || (key.downArrow && !input && histIdx === null)) {
+                setSubAgentFocus("main");
+                setDetails(null);
+                return;
             }
-            return;
         }
-        // Enter with a sub-agent highlighted: show its detail.
-        if (agents.length > 0 && subAgentFocus !== null && key.return) {
-            setSubAgentDetail(agents[subAgentFocus].id === subAgentDetail ? null : agents[subAgentFocus].id);
-            return;
-        }
-        if (busy)
-            return; // a turn in flight with no prompt — ignore typing for now (type-ahead is later)
-        if (key.return) {
+        // Ink 5 strips the leading ESC from CSI-u / modifyOtherKeys sequences.
+        if (key.return || modifiedReturn) {
+            if (submitting.current || (busy && !turn.current))
+                return;
+            const immediate = key.ctrl || modifiedReturn;
+            if (!input.trim() && immediate && followUps.size) {
+                interruptForFollowUp();
+                return;
+            }
             // Dismiss the sub-agent detail/focus on a normal submit.
+            setDetails(null);
             setSubAgentDetail(null);
             setSubAgentFocus(null);
-            const text = input.trim();
+            const text = completionAction.submit ?? input.trim();
             setInput("");
             setCursor(0);
             setHistIdx(null);
+            const attachments = imagesInInput(text, images);
+            setImages([]);
             if (!text)
                 return;
             if (text.trim())
                 history.push(text); // remember non-empty entries for ↑/↓
-            void submitLine(text);
+            submitting.current = true;
+            void submitLine(text, attachments, immediate)
+                .catch((error) => note(chalk.yellow(`Could not submit message: ${error instanceof Error ? error.message : String(error)}`)))
+                .finally(() => { submitting.current = false; });
         }
         else if (key.leftArrow) {
-            setCursor((c) => Math.max(0, c - 1)); // move the caret left within the line
+            setCursor((c) => pastedTexts.at(input, c, "left")?.start ?? Math.max(0, c - 1));
         }
         else if (key.rightArrow) {
-            setCursor((c) => Math.min(input.length, c + 1)); // ...and right
+            setCursor((c) => pastedTexts.at(input, c, "right")?.end ?? Math.min(input.length, c + 1));
         }
         else if (key.ctrl && char === "a") {
             setCursor(0); // Home — jump to the start of the line
@@ -620,7 +823,19 @@ export function App({ session, runTurn }) {
         else if (key.backspace || key.delete) {
             // 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) {
+            const attachment = images.find((image) => input.slice(0, cursor).endsWith(imageLabel(image.id)));
+            const paste = pastedTexts.at(input, cursor, "left");
+            if (paste) {
+                setInput(input.slice(0, paste.start) + input.slice(paste.end));
+                setCursor(paste.start);
+            }
+            else if (attachment) {
+                const length = imageLabel(attachment.id).length;
+                setInput(input.slice(0, cursor - length) + input.slice(cursor));
+                setCursor(cursor - length);
+                setImages(images.filter((image) => image.id !== attachment.id));
+            }
+            else if (cursor > 0) {
                 setInput(input.slice(0, cursor - 1) + input.slice(cursor));
                 setCursor(cursor - 1);
             }
@@ -628,87 +843,85 @@ export function App({ session, runTurn }) {
         else if (char && !key.ctrl && !key.meta) {
             // 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;
+            const add = char.length > 1 ? pastedTexts.fold(normalizeDroppedPaths(char)) : char;
             setHistIdx(null);
             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) }) })), _jsx(Box, { borderStyle: "round", borderColor: planMode ? "magenta" : "cyan", paddingX: 1, marginTop: 1, flexDirection: "column", children: (() => {
-                    const prompt = planMode ? "plan ❯ " : "❯ ";
-                    const promptColor = planMode ? "magenta" : "cyan";
-                    const cols = process.stdout.columns || 80;
-                    const innerWidth = Math.max(10, cols - 4); // border(2) + paddingX(2)
-                    const promptW = displayWidth(prompt);
-                    const firstW = Math.max(1, innerWidth - promptW);
-                    // Build visual lines display-width-aware (CJK, emoji = 2 cols).
-                    const lines = [""];
-                    let row = 0;
-                    let col = 0;
-                    // Cursor tracking: map code-unit offset → (line, display-column).
-                    let cursorLine = 0;
-                    let cursorCol = 0;
-                    let set = false;
-                    let cu = 0; // code-unit offset, for matching `cursor`
-                    for (const ch of input) {
-                        if (!set && cu === cursor) {
-                            cursorLine = row;
-                            cursorCol = col;
-                            set = true;
-                        }
-                        const cw = displayWidth(ch);
-                        const limit = row === 0 ? firstW : innerWidth;
-                        if (col + cw > limit) {
-                            row++;
-                            col = 0;
-                            lines[row] = "";
-                        }
-                        lines[row] += ch;
-                        col += cw;
-                        cu += ch.length;
-                    }
-                    if (!set) {
-                        cursorLine = row;
-                        cursorCol = col;
-                    } // cursor at end
-                    // Cursor exactly at edge → wrap to start of next line for visibility
-                    const edge = cursorLine === 0 ? firstW : innerWidth;
-                    if (cursorCol >= edge) {
-                        cursorLine++;
-                        cursorCol = 0;
-                        if (lines.length <= cursorLine)
-                            lines.push("");
-                    }
-                    // Map display-column back to code-unit offset within the target line.
-                    const cursorLineText = lines[cursorLine] ?? "";
-                    let cuOff = 0; // code-unit offset into cursorLineText that matches cursorCol
-                    let dcol = 0;
-                    for (const ch of cursorLineText) {
-                        if (dcol >= cursorCol)
-                            break;
-                        dcol += displayWidth(ch);
-                        cuOff += ch.length;
-                    }
-                    return lines.map((line, i) => {
-                        if (i === cursorLine) {
-                            const before = line.slice(0, cuOff);
-                            const at = line.slice(cuOff, cuOff + 1) || " ";
-                            const after = line.slice(cuOff + 1);
-                            return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: before }), _jsx(Text, { inverse: true, children: at }), _jsx(Text, { children: after })] }, i));
-                        }
-                        return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: line })] }, i));
-                    });
-                })() }), (() => {
-                const agents = listSubAgents();
-                if (!agents.length)
-                    return null;
-                return (_jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "agents \u00B7 " }), agents.map((sa, i) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: i === subAgentFocus ? "cyan" : "blue", bold: i === subAgentFocus, children: sa.id }), _jsx(Text, { dimColor: true, children: sa.status === "running" ? " ●" : sa.status === "done" ? " ✓" : " ✗" }), i < agents.length - 1 && _jsx(Text, { dimColor: true, children: " \u2502 " })] }, sa.id))), _jsx(Text, { dimColor: true, children: " \u00B7 Tab" })] }), subAgentDetail && (() => {
-                            const detail = agents.find((sa) => sa.id === subAgentDetail);
-                            if (!detail)
-                                return null;
-                            const head = `${detail.id} · ${detail.status === "running" ? "running" : detail.status === "done" ? "done" : "failed"}`;
-                            const body = detail.result ?? "(still working…)";
-                            return (_jsxs(Box, { flexDirection: "column", marginTop: 0, borderStyle: "single", borderColor: "blue", paddingX: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: head }), _jsx(Text, { dimColor: true, children: detail.description }), _jsx(Box, { marginTop: 0, children: _jsx(Text, { children: body.length > 500 ? body.slice(0, 500) + "\n…" : body }) })] }));
-                        })()] }));
-            })(), _jsx(StatusBar, { model: model, dir: dir, branch: branch, status: getStatus() })] }));
+    const agents = listAgentViews();
+    const selectedAgent = agents.find((a) => a.id === subAgentDetail);
+    const agentDetailView = detailPage(selectedAgent?.transcript || "(Waiting for activity…)", agentPage, Math.max(1, Math.min(10, rows - 10)), Math.max(1, columns - 4));
+    const detailView = detailPage(details === "tools" ? getToolCalls() ?? "No tool calls this turn." : details === "reasoning" ? getReasoning() ?? "No thinking recorded this turn." : "", detailOffset, Math.max(1, Math.min(12, rows - 9)), Math.max(1, columns - 4));
+    const activity = rows >= 20 && busy && !details && !pending && !subAgentDetail && !followUps.size ? summarizeActivity(getToolActivity(), Date.now(), rows >= 30 && !agents.length ? 2 : 1) : [];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: items, children: (item, i) => _jsx(ItemView, { item: item }, i) }), _jsxs(Box, { flexDirection: "column", height: !pending && (details || selectedAgent) ? Math.max(1, rows - 1) : undefined, overflow: "hidden", children: [live !== null && !details && !pending && !selectedAgent && (_jsxs(Box, { marginTop: rows >= 20 ? 1 : 0, flexDirection: "row", children: [_jsx(Text, { color: "green", children: "\u23FA " }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: live === "" ? chalk.dim("…") : liveTail(live, rows, columns, followUps.size > 0) }) })] })), activity.map((group, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i === 0 ? 1 : 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: group.failed ? "yellow" : group.running ? "cyan" : "green", children: "\u25CF " }), _jsx(Text, { bold: true, children: group.title })] }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  \u23BF ", group.detail] })] }, i))), !details && !pending && !selectedAgent && (status !== null || busy) && (_jsxs(Box, { marginTop: rows >= 20 ? 1 : 0, children: [_jsx(Spinner, {}), _jsxs(Text, { color: "#D77757", wrap: "truncate-end", children: [" ", status?.replace("Ctrl+C to interrupt", "Esc to interrupt") ?? (live !== null ? "Writing…" : "Working…")] })] })), rows >= 20 && !details && !selectedAgent && !pending && (busy || getToolCallCount() > 0) && (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  ", getToolCallCount(), " tool calls \u00B7 Ctrl+T details \u00B7 Ctrl+R thinking", busy ? " · Esc interrupt" : ""] })), details && !pending && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [details === "tools" ? "Tool details" : "Thinking", " \u00B7 ", detailView.pages - detailView.page, "/", detailView.pages, " \u00B7 \u2191\u2193 page \u00B7 Esc close", followUps.size ? ` · ${followUps.size} queued` : ""] }), _jsx(Text, { children: detailView.text })] })), selectedAgent && !pending && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "blue", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "cyan", wrap: "truncate-end", children: [selectedAgent.name, " \u00B7 ", selectedAgent.model, " \u00B7 ", selectedAgent.status, " \u00B7 Esc main"] }), _jsxs(Box, { children: [selectedAgent.status === "running" && _jsx(Spinner, {}), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [" ", selectedAgent.activity, " \u00B7 ", selectedAgent.toolCalls, " tools \u00B7 PgUp/PgDn details"] })] }), _jsx(Text, { children: agentDetailView.text })] })), 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) }) })), pending && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Type a follow-up \u00B7 Enter sends text; empty input selects \u00B7 Esc cancels" }), !details && !selectedAgent && !pending && followUps.size > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: rows >= 20 ? 1 : 0, children: [_jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Messages queued for the next tool boundary \u00B7 Esc / Ctrl+Enter interrupt and send" }), followUps.pending.slice(rows >= 20 ? -2 : -1).map((message, i) => _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  \u21B3 ", message.displayText ?? message.text] }, i)), followUps.size > 2 && _jsxs(Text, { dimColor: true, children: ["  \u2026 ", followUps.size - 2, " earlier messages queued"] })] })), _jsx(Box, { borderStyle: "round", borderColor: planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : autoEnabled ? "yellow" : "cyan", paddingX: 1, marginTop: rows >= 20 ? 1 : 0, flexDirection: "column", flexShrink: 0, children: (() => {
+                            const prompt = "❯ ";
+                            const promptColor = planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : autoEnabled ? "yellow" : "cyan";
+                            const cols = columns;
+                            const innerWidth = Math.max(10, cols - 4); // border(2) + paddingX(2)
+                            const promptW = displayWidth(prompt);
+                            const firstW = Math.max(1, innerWidth - promptW);
+                            // Build visual lines display-width-aware (CJK, emoji = 2 cols).
+                            const lines = [""];
+                            let row = 0;
+                            let col = 0;
+                            // Cursor tracking: map code-unit offset → (line, display-column).
+                            let cursorLine = 0;
+                            let cursorCol = 0;
+                            let set = false;
+                            let cu = 0; // code-unit offset, for matching `cursor`
+                            for (const ch of input) {
+                                if (!set && cu === cursor) {
+                                    cursorLine = row;
+                                    cursorCol = col;
+                                    set = true;
+                                }
+                                const cw = displayWidth(ch);
+                                const limit = row === 0 ? firstW : innerWidth;
+                                if (col + cw > limit) {
+                                    row++;
+                                    col = 0;
+                                    lines[row] = "";
+                                }
+                                lines[row] += ch;
+                                col += cw;
+                                cu += ch.length;
+                            }
+                            if (!set) {
+                                cursorLine = row;
+                                cursorCol = col;
+                            } // cursor at end
+                            // Cursor exactly at edge → wrap to start of next line for visibility
+                            const edge = cursorLine === 0 ? firstW : innerWidth;
+                            if (cursorCol >= edge) {
+                                cursorLine++;
+                                cursorCol = 0;
+                                if (lines.length <= cursorLine)
+                                    lines.push("");
+                            }
+                            // Map display-column back to code-unit offset within the target line.
+                            const cursorLineText = lines[cursorLine] ?? "";
+                            let cuOff = 0; // code-unit offset into cursorLineText that matches cursorCol
+                            let dcol = 0;
+                            for (const ch of cursorLineText) {
+                                if (dcol >= cursorCol)
+                                    break;
+                                dcol += displayWidth(ch);
+                                cuOff += ch.length;
+                            }
+                            // Long drafts must not grow the redraw region. Keep the cursor's
+                            // neighborhood visible; the complete draft remains in input state.
+                            const visibleRows = details || selectedAgent || followUps.size || completion.visible || rows < 20 ? 1 : 3;
+                            const startLine = Math.max(0, cursorLine - visibleRows + 1);
+                            return lines.slice(startLine, startLine + visibleRows).map((line, offset) => {
+                                const i = startLine + offset;
+                                if (i === cursorLine) {
+                                    const before = line.slice(0, cuOff);
+                                    const at = line.slice(cuOff, cuOff + 1) || " ";
+                                    const after = line.slice(cuOff + 1);
+                                    return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: before }), _jsx(Text, { inverse: true, children: at }), _jsx(Text, { children: after })] }, i));
+                                }
+                                return (_jsxs(Box, { children: [i === 0 && _jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { children: line })] }, i));
+                            });
+                        })() }), completion.view, rows >= 20 && busy && !details && !selectedAgent && !pending && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Enter queue follow-up \u00B7 Ctrl+Enter interrupt and send now" }), rows >= 20 && !details && !selectedAgent && !pending && !completion.visible && _jsx(AgentList, { agents: agents, focus: subAgentFocus, viewing: subAgentDetail, mainBusy: busy, maxRows: Math.max(2, Math.min(3, rows - 24)) }), _jsx(StatusBar, { model: CONFIG.model, dir: dir, branch: branch, status: getStatus() }), (planMode || autoEnabled || CONFIG.bypassPermissions) && (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: planMode ? "magenta" : CONFIG.bypassPermissions ? "red" : "yellow", children: planMode ? "⏸ plan mode on" : CONFIG.bypassPermissions ? "▶▶ bypass permissions on" : "▶▶ auto mode on" }), _jsx(Text, { dimColor: true, children: planMode ? " (/plan to toggle)" : CONFIG.bypassPermissions ? " (this run)" : " (/auto to toggle)" })] }))] })] }));
 }