klyro 1.0.3 → 1.0.5

package/dist/tui/app.js

@@ -10,9 +10,10 @@ import { execFileSync } from 'node:child_process';
 import { TuiApprovalBridge, ApprovalModal } from './approval.js';
 import { parse as parseSlash, suggestCommands } from '../cli/slash/parser.js';
 import { tokens, g } from './tokens.js';
-import { initialScroll, scrollReducer, resolveTopRow, maxTopFor, } from './scroll-model.js';
+import { initialScroll, scrollReducer, resolveTopRow, maxTopFor, badgeLabel, } from './scroll-model.js';
 import { buildIndex, itemAtRow, MeasureCache } from './measure.js';
 import { renderMarkdownLines } from './markdown.js';
+import { redact } from '../policy/secret-redactor.js';
 import { readVersion } from '../version.js';
 import { getTranscriptCommand, } from './transcript-commands.js';
 import { estimateCost, getModelInfo } from '../providers/model-info.js';
@@ -85,6 +86,24 @@ function groupTools(items) {
     flush();
     return out;
 }
+// Input line with an explicit block cursor for vim normal mode.
+// Same single-<Text> invariant as MarkdownText: nested inline parts only,
+// so the row-direction parent never lays siblings out as columns.
+function InputWithCursor({ input, cursor }) {
+    const dimColor = tokens.colors.dim;
+    if (!input) {
+        return (_jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: dimColor, children: "Message Klyro..." }), "|"] }));
+    }
+    const safe = redact(input);
+    if (cursor === null) {
+        return _jsxs(Text, { wrap: "wrap", children: [safe, "|"] });
+    }
+    const pos = Math.max(0, Math.min(cursor, safe.length));
+    const before = safe.slice(0, pos);
+    const ch = safe.slice(pos, pos + 1) || ' ';
+    const after = safe.slice(pos + 1);
+    return (_jsxs(Text, { wrap: "wrap", children: [before, _jsx(Text, { inverse: true, children: ch }), after] }));
+}
 // design.md §23/§24 — terminal Markdown via tui/markdown.ts: headings,
 // **bold**, *italic*, `code`, fences, links, lists. Ink wraps the text.
 //
@@ -93,7 +112,9 @@ function groupTools(items) {
 // out as side-by-side COLUMNS (garbled transcript) instead of lines.
 function MarkdownText({ text, dim, width }) {
     void width;
-    const lines = useMemo(() => renderMarkdownLines(text), [text]);
+    // Display boundary: scrub secret shapes before painting the screen.
+    // Execution data is untouched — this only affects rendered output.
+    const lines = useMemo(() => renderMarkdownLines(redact(text)), [text]);
     const dimColor = tokens.colors.dim;
     const softColor = tokens.colors.soft;
     return (_jsx(Text, { wrap: "wrap", color: dim ? dimColor : undefined, children: lines.map((l, i) => (_jsxs(React.Fragment, { children: [i > 0 ? '\n' : null, l.parts.map((p, j) => {
@@ -227,6 +248,58 @@ export function App(props) {
         const t = setTimeout(toBottom, 0);
         return () => clearTimeout(t);
     }, [submitKey]);
+    // Double-Esc convention: the first Esc while running only arms (with a
+    // status hint); a second Esc within 1500ms cancels the stream. Single-Esc
+    // immediate cancel was too easy to hit by accident next to Shift+Enter.
+    const escArmedAt = useRef(0);
+    const [escArmed, setEscArmed] = useState(false);
+    const escArmTimer = useRef(null);
+    const disarmEsc = useCallback(() => {
+        escArmedAt.current = 0;
+        setEscArmed(false);
+        if (escArmTimer.current) {
+            clearTimeout(escArmTimer.current);
+            escArmTimer.current = null;
+        }
+    }, []);
+    // Minimal vim input mode (/vim toggles live via directHooks.setVimMode).
+    // Normal mode: h/l/0/$ move, x deletes, i/a enter insert, j/k scroll a
+    // line; every other printable key is swallowed (never typed). The cursor
+    // is an explicit index (null = end); rendering clamps it.
+    const [vimMode, setVimMode] = useState('insert');
+    const [vimCursor, setVimCursor] = useState(null);
+    const setVimModeLive = useCallback((m) => {
+        setVimMode(m);
+        if (m === 'insert')
+            setVimCursor(null);
+    }, []);
+    // Cursor-aware editing: mirrors for synchronous use inside key handlers.
+    const inputRef = useRef('');
+    const vimCursorRef = useRef(null);
+    useEffect(() => { inputRef.current = input; }, [input]);
+    useEffect(() => { vimCursorRef.current = vimCursor; }, [vimCursor]);
+    const clampCursor = (v, c) => c === null ? v.length : Math.max(0, Math.min(c, v.length));
+    const insertAtCursor = useCallback((text) => {
+        const t = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        if (!t)
+            return;
+        const v = inputRef.current;
+        const pos = clampCursor(v, vimCursorRef.current);
+        const nv = v.slice(0, pos) + t + v.slice(pos);
+        setInput(nv);
+        setVimCursor(pos + t.length >= nv.length ? null : pos + t.length);
+        setHistIdx(null);
+    }, []);
+    const deleteBeforeCursor = useCallback(() => {
+        const v = inputRef.current;
+        const pos = clampCursor(v, vimCursorRef.current);
+        if (pos === 0)
+            return;
+        const nv = v.slice(0, pos - 1) + v.slice(pos);
+        setInput(nv);
+        setVimCursor(pos - 1 >= nv.length ? null : pos - 1);
+        setHistIdx(null);
+    }, []);
     // Shift+Enter intent: explicit shift+return, kitty/CSI-u sequence, legacy
     // ESC+CR pair, or Esc immediately followed by Return (75ms, non-empty input).
     const escReturnAt = useRef(0);
@@ -239,6 +312,88 @@ export function App(props) {
         top: () => { },
         reset: () => { },
     });
+    // Streaming render throttle: per-token setState copies the whole
+    // transcript array AND the growing string (O(n²) over long streams).
+    // Deltas accumulate in refs (the truth) and flush to state at most
+    // every STREAM_FLUSH_MS, plus on turn end / new items. Renders stay
+    // live (≤64ms stale) while array+string copies stay bounded.
+    // Declared early: queued-input and key handlers below call resetStream.
+    const STREAM_FLUSH_MS = 64;
+    const streamTextRef = useRef('');
+    const streamFlushAt = useRef(0);
+    const streamTimer = useRef(null);
+    const thinkingTextRef = useRef('');
+    const thinkingFlushAt = useRef(0);
+    const thinkingTimer = useRef(null);
+    // Declared before the flush callbacks that capture it.
+    const thinkingIdRef = useRef(null);
+    const flushStream = useCallback(() => {
+        const sid = streamingIdRef.current;
+        if (streamTimer.current) {
+            clearTimeout(streamTimer.current);
+            streamTimer.current = null;
+        }
+        if (!sid)
+            return;
+        const text = streamTextRef.current;
+        streamFlushAt.current = Date.now();
+        setTranscript((prev) => {
+            const idx = prev.findIndex((x) => x.id === sid);
+            if (idx === -1)
+                return [...prev, { id: sid, kind: 'text', text, role: 'assistant' }];
+            const cur = prev[idx];
+            if (cur.text === text)
+                return prev;
+            const copy = [...prev];
+            copy[idx] = { ...cur, text };
+            return copy;
+        });
+    }, []);
+    const flushThinking = useCallback(() => {
+        const tid = thinkingIdRef.current;
+        if (thinkingTimer.current) {
+            clearTimeout(thinkingTimer.current);
+            thinkingTimer.current = null;
+        }
+        if (!tid)
+            return;
+        const text = thinkingTextRef.current;
+        thinkingFlushAt.current = Date.now();
+        setTranscript((prev) => {
+            const idx = prev.findIndex((x) => x.id === tid);
+            if (idx === -1)
+                return [...prev, { id: tid, kind: 'thinking', text }];
+            const cur = prev[idx];
+            if (cur.text === text)
+                return prev;
+            const copy = [...prev];
+            copy[idx] = { ...cur, text };
+            return copy;
+        });
+    }, []);
+    const resetStream = useCallback(() => {
+        streamingIdRef.current = null;
+        streamTextRef.current = '';
+        if (streamTimer.current) {
+            clearTimeout(streamTimer.current);
+            streamTimer.current = null;
+        }
+    }, []);
+    const resetThinking = useCallback(() => {
+        thinkingIdRef.current = null;
+        thinkingTextRef.current = '';
+        if (thinkingTimer.current) {
+            clearTimeout(thinkingTimer.current);
+            thinkingTimer.current = null;
+        }
+    }, []);
+    // Flush pending tail before unmount so no trailing delta is lost.
+    useEffect(() => () => {
+        if (streamTimer.current)
+            clearTimeout(streamTimer.current);
+        if (thinkingTimer.current)
+            clearTimeout(thinkingTimer.current);
+    }, []);
     const width = stdout?.columns ?? 100;
     const height = stdout?.rows ?? 30;
     const isFullscreen = props.isFullscreen ?? false;
@@ -322,7 +477,7 @@ export function App(props) {
     const blockKeys = useMemo(() => blocks.map((b) => b.key), [blocks]);
     const blockHeights = useMemo(() => blocks.map((b) => cache.heightFor(b.key, b.desc, width)), [blocks, width, cache]);
     const scroll = useChatScroll({ keys: blockKeys, heights: blockHeights, viewportH, width });
-    const { topRow, maxTop, pinned, pendingNew, commands } = scroll;
+    const { topRow, maxTop, pinned, pendingNew, commands, atBottom } = scroll;
     const trackH = viewportH;
     const thumbPos = maxTop === 0 ? 0 : Math.round((topRow / maxTop) * (trackH - 1));
     // Slice *display lines* [topRow, topRow+viewportH): intersecting blocks only
@@ -394,60 +549,74 @@ export function App(props) {
             const toSend = queuedInputs[0];
             setQueuedInputs((prev) => prev.slice(1));
             setTranscript((prev) => [...prev, { id: nextId('user'), kind: 'text', text: toSend, role: 'user' }]);
-            streamingIdRef.current = null;
+            resetStream();
             const cmd = parseSlash(toSend.trim());
             if (cmd.kind === 'prompt')
                 void props.onPrompt(cmd.text);
             else
                 void props.onSlash(cmd);
         }
-    }, [queuedInputs, status.status, awaitingApproval]);
+    }, [queuedInputs, status.status, awaitingApproval, resetStream]);
     useEffect(() => { if (status.status !== 'running')
         return; const start = Date.now() - elapsed; const t = setInterval(() => setElapsed(Date.now() - start), 1000); return () => clearInterval(t); }, [status.status, elapsed]);
-    const append = useCallback((item) => { if (item.kind !== 'text' || item.role !== 'assistant')
-        streamingIdRef.current = null; setTranscript((prev) => [...prev, item]); }, []);
+    const append = useCallback((item) => {
+        if (item.kind !== 'text' || item.role !== 'assistant') {
+            flushStream();
+            resetStream();
+        }
+        setTranscript((prev) => [...prev, item]);
+    }, [flushStream, resetStream]);
     const appendDelta = useCallback((text) => {
         if (!text)
             return;
-        const sid = streamingIdRef.current;
-        if (sid)
-            setTranscript((prev) => { const idx = prev.findIndex((x) => x.id === sid); if (idx === -1)
-                return [...prev, { id: sid, kind: 'text', text, role: 'assistant' }]; const cur = prev[idx]; const copy = [...prev]; copy[idx] = { ...cur, text: cur.text + text }; return copy; });
-        else {
+        if (!streamingIdRef.current) {
             const id = nextId('stream');
             streamingIdRef.current = id;
-            setTranscript((prev) => [...prev, { id, kind: 'text', text, role: 'assistant' }]);
+            streamTextRef.current = '';
+            streamFlushAt.current = 0;
         }
-    }, []);
+        streamTextRef.current += text;
+        const now = Date.now();
+        if (now - streamFlushAt.current >= STREAM_FLUSH_MS)
+            flushStream();
+        else if (!streamTimer.current)
+            streamTimer.current = setTimeout(flushStream, STREAM_FLUSH_MS - (now - streamFlushAt.current));
+    }, [flushStream]);
     // Ephemeral reasoning display: merges into one transient item (never in
     // context/persistence); removed when the turn's answer completes.
-    const thinkingIdRef = useRef(null);
     const appendThinkingDelta = useCallback((text) => {
         if (!text)
             return;
-        const tid = thinkingIdRef.current;
-        if (tid)
-            setTranscript((prev) => { const idx = prev.findIndex((x) => x.id === tid); if (idx === -1)
-                return [...prev, { id: tid, kind: 'thinking', text }]; const cur = prev[idx]; const copy = [...prev]; copy[idx] = { ...cur, text: cur.text + text }; return copy; });
-        else {
+        if (!thinkingIdRef.current) {
             const id = nextId('thinking');
             thinkingIdRef.current = id;
-            setTranscript((prev) => [...prev, { id, kind: 'thinking', text }]);
+            thinkingTextRef.current = '';
+            thinkingFlushAt.current = 0;
         }
-    }, []);
+        thinkingTextRef.current += text;
+        const now = Date.now();
+        if (now - thinkingFlushAt.current >= STREAM_FLUSH_MS)
+            flushThinking();
+        else if (!thinkingTimer.current)
+            thinkingTimer.current = setTimeout(flushThinking, STREAM_FLUSH_MS - (now - thinkingFlushAt.current));
+    }, [flushThinking]);
     const clearThinking = useCallback(() => {
-        thinkingIdRef.current = null;
+        resetThinking();
         setTranscript((prev) => (prev.some((x) => x.kind === 'thinking') ? prev.filter((x) => x.kind !== 'thinking') : prev));
-    }, []);
+    }, [resetThinking]);
     useEffect(() => {
         if (status.status !== 'running') {
-            streamingIdRef.current = null;
-            thinkingIdRef.current = null;
+            // Turn end: flush any throttled tail first so the final text is
+            // complete, then drop the transient thinking block as before.
+            flushStream();
+            resetStream();
+            resetThinking();
+            disarmEsc();
             // Runs that end without final_text (abort/cancel/error) must not leave
             // stale thinking blocks behind — only the response may remain.
             setTranscript((prev) => (prev.some((x) => x.kind === 'thinking') ? prev.filter((x) => x.kind !== 'thinking') : prev));
         }
-    }, [status.status]);
+    }, [status.status, flushStream, resetStream, resetThinking, disarmEsc]);
     const updateStatus = useCallback((s) => setStatus((p) => ({ ...p, ...s })), []);
     const updatePlan = useCallback((p) => setPlan(p), []);
     // Tool results patch the running start-item IN PLACE (no second item, so a
@@ -465,14 +634,14 @@ export function App(props) {
         });
     }, []);
     const clearTranscript = useCallback(() => {
-        streamingIdRef.current = null;
-        thinkingIdRef.current = null;
+        resetStream();
+        resetThinking();
         setTranscript([]);
         setPlan([]);
         // Fresh content → fresh scroll (a pruned anchor would otherwise stick to
         // the bottom with a stale newSinceUnstick badge count).
         scrollCmdsRef.current.reset();
-    }, []);
+    }, [resetStream, resetThinking]);
     // Scroll control for external drivers (mouse-wheel tap in repl.ts, §8.4).
     // Stored in refs so the callbacks stay stable while acting on latest state.
     const scrollLines = useCallback((delta) => { scrollCmdsRef.current.line(delta); }, []);
@@ -500,7 +669,12 @@ export function App(props) {
     }), []);
     const onMountedRef = useRef(props.onMounted);
     useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
-    useEffect(() => { onMountedRef.current?.({ append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcript: transcriptHandle, updateTool, appendThinkingDelta, clearThinking }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; globalThis.__klyroAppendThinking = appendThinkingDelta; globalThis.__klyroClearThinking = clearThinking; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; delete globalThis.__klyroAppendThinking; delete globalThis.__klyroClearThinking; }; }, [append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcriptHandle, updateTool, appendThinkingDelta, clearThinking]);
+    // Bracketed-paste bulk insert: one atomic input append (no per-char
+    // autocomplete/history side effects) with newline normalization.
+    const pasteText = useCallback((text) => {
+        insertAtCursor(text);
+    }, [insertAtCursor]);
+    useEffect(() => { onMountedRef.current?.({ append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcript: transcriptHandle, updateTool, appendThinkingDelta, clearThinking, pasteText, setVimMode: setVimModeLive }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; globalThis.__klyroAppendThinking = appendThinkingDelta; globalThis.__klyroClearThinking = clearThinking; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; delete globalThis.__klyroAppendThinking; delete globalThis.__klyroClearThinking; }; }, [append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcriptHandle, updateTool, appendThinkingDelta, clearThinking, pasteText, setVimModeLive]);
     const toggleGroup = (id) => setExpandedGroups((prev) => { const n = new Set(prev); if (n.has(id))
         n.delete(id);
     else
@@ -512,12 +686,14 @@ export function App(props) {
     useInput((inputStr, key) => {
         if (key.escape && queuedInputs.length > 0) {
             setQueuedInputs((prev) => prev.slice(1));
+            disarmEsc();
             return;
         }
         // Tab completes the top slash suggestion (e.g. `/c` → `/clear `)
         if ((key.tab || inputStr === '\t') && slashSuggest.length > 0) {
             const top = slashSuggest[0];
             setInput(`/${top.name} `);
+            setVimCursor(null);
             return;
         }
         // Scroll keys (work in any mode, including while running).
@@ -538,6 +714,10 @@ export function App(props) {
                 commands.jumpBottom();
                 return;
             }
+            if (inputStr === ' ' && pinned && pendingNew > 0) {
+                commands.jumpBottom();
+                return;
+            } // Space → jump to unread tail
             if (key.ctrl && inputStr === 'g') {
                 commands.jumpBottom();
                 return;
@@ -577,10 +757,80 @@ export function App(props) {
             inputStr === '\x1b\r' ||
             inputStr === '\x1b[13;2u' ||
             (key.return && input.trim() !== '' && now - escReturnAt.current < 75)) {
-            setInput((v) => v + '\n');
+            insertAtCursor('\n');
             setHistIdx(null);
             return;
         }
+        // Vim normal mode: motion/editing keys act on the input buffer instead
+        // of typing. Return/arrows/tab/ctrl fall through to the shared logic
+        // below; every other printable key is swallowed.
+        if (vimMode === 'normal' && !awaitingApproval) {
+            // Legacy Shift+Enter partner: an Esc that just switched modes followed
+            // by Return within 75ms still means newline, not submit.
+            if (key.return && input.trim() !== '' && Date.now() - escReturnAt.current < 75) {
+                insertAtCursor('\n');
+                setVimMode('insert');
+                return;
+            }
+            const cur = vimCursor === null ? input.length : Math.max(0, Math.min(vimCursor, input.length));
+            const move = (d) => { setVimCursor(Math.max(0, Math.min(cur + d, input.length))); return true; };
+            if (!key.ctrl && !key.meta && !key.return && !key.tab && !key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow) {
+                if (inputStr === 'i') {
+                    setVimMode('insert');
+                    setVimCursor(null);
+                    return;
+                }
+                if (inputStr === 'a') {
+                    setVimCursor(Math.min(cur + 1, input.length));
+                    setVimMode('insert');
+                    return;
+                }
+                if (inputStr === 'h') {
+                    move(-1);
+                    return;
+                }
+                if (inputStr === 'l') {
+                    move(1);
+                    return;
+                }
+                if (inputStr === '0') {
+                    setVimCursor(0);
+                    return;
+                }
+                if (inputStr === '$') {
+                    setVimCursor(input.length);
+                    return;
+                }
+                if (inputStr === 'x') {
+                    if (cur < input.length)
+                        setInput(input.slice(0, cur) + input.slice(cur + 1));
+                    setHistIdx(null);
+                    return;
+                }
+                if (inputStr === 'j') {
+                    if (isFullscreen && maxTop > 0)
+                        commands.lineDown();
+                    return;
+                }
+                if (inputStr === 'k') {
+                    if (isFullscreen && maxTop > 0)
+                        commands.lineUp();
+                    return;
+                }
+                if (key.backspace || key.delete) {
+                    move(-1);
+                    return;
+                }
+                if (key.escape)
+                    return; // already normal
+                if (inputStr)
+                    return; // swallow everything else printable
+            }
+            else if (key.backspace || key.delete) {
+                move(-1);
+                return;
+            }
+        }
         if (status.status === 'running') {
             // design.md §18: first Ctrl+C cancels the run, second quits.
             if (key.ctrl && inputStr === 'c') {
@@ -593,9 +843,26 @@ export function App(props) {
                 }
                 return;
             }
-            // Esc with an empty queue cancels streaming (§18); non-empty drops one (top).
+            // Esc no longer cancels on first press: with a queued item it drops
+            // one; otherwise the first Esc arms and the second (≤1500ms) cancels.
             if (key.escape) {
-                void props.onSlash({ kind: 'cancel' });
+                if (queuedInputs.length > 0) {
+                    setQueuedInputs((prev) => prev.slice(1));
+                    disarmEsc();
+                    return;
+                }
+                const t = Date.now();
+                if (t - escArmedAt.current < 1500) {
+                    disarmEsc();
+                    void props.onSlash({ kind: 'cancel' });
+                }
+                else {
+                    escArmedAt.current = t;
+                    setEscArmed(true);
+                    if (escArmTimer.current)
+                        clearTimeout(escArmTimer.current);
+                    escArmTimer.current = setTimeout(disarmEsc, 1500);
+                }
                 return;
             }
             // Enter on empty input dismisses the badge (jump to bottom, §7.2)
@@ -610,16 +877,17 @@ export function App(props) {
                     return;
                 setQueuedInputs((prev) => [...prev, v]);
                 setInput('');
+                setVimCursor(null);
                 pushHistory(v);
                 setSubmitKey((k) => k + 1);
                 return;
             }
             if (key.backspace || key.delete) {
-                setInput((v) => v.slice(0, -1));
+                deleteBeforeCursor();
                 return;
             }
             if (!key.ctrl && !key.meta)
-                setInput((v) => v + inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n'));
+                insertAtCursor(inputStr);
             return;
         }
         // design.md §18: idle Ctrl+C exits.
@@ -635,6 +903,7 @@ export function App(props) {
                     const next = histIdx === null ? history.length - 1 : Math.max(0, histIdx - 1);
                     setHistIdx(next);
                     setInput(history[next] ?? '');
+                    setVimCursor(null);
                 }
                 return;
             }
@@ -654,6 +923,7 @@ export function App(props) {
                     setHistIdx(next);
                     setInput(history[next] ?? '');
                 }
+                setVimCursor(null);
                 return;
             }
             if (input.trim() !== '')
@@ -672,10 +942,11 @@ export function App(props) {
                 return;
             }
             setInput('');
+            setVimCursor(null);
             setHistIdx(null);
             pushHistory(v);
             setTranscript((prev) => [...prev, { id: nextId('user'), kind: 'text', text: v, role: 'user' }]);
-            streamingIdRef.current = null;
+            resetStream();
             setSubmitKey((k) => k + 1);
             const cmd = parseSlash(v);
             if (cmd.kind === 'prompt')
@@ -685,13 +956,17 @@ export function App(props) {
             return;
         }
         if (key.backspace || key.delete) {
-            setInput((v) => v.slice(0, -1));
-            setHistIdx(null);
+            deleteBeforeCursor();
             return;
         }
         if (!key.ctrl && !key.meta) {
-            setInput((v) => v + inputStr);
-            setHistIdx(null);
+            insertAtCursor(inputStr);
+        }
+        // Idle Esc enters vim normal mode (vimLive parity for keyboard-only users).
+        if (key.escape && vimMode === 'insert') {
+            setVimMode('normal');
+            setVimCursor(inputRef.current.length);
+            return;
         }
     });
     // Single source of truth: package.json via version.ts — never hardcoded.
@@ -703,9 +978,12 @@ export function App(props) {
     const ctxWindow = getModelInfo(status.model).contextWindow;
     const ctxPct = totalTokens > 0 ? Math.round((totalTokens / ctxWindow) * 100) : 0;
     // Narrow terminals: compact hints so the status bar never wraps mid-word.
-    const baseHints = width < 90
-        ? status.status === 'running' ? 'ctrl+c stop · enter queue' : 'enter send · / commands'
-        : status.status === 'running' ? 'ctrl+c to stop  ·  enter to queue  ·  ctrl+o expand' : transcript.length === 0 ? 'shift+tab to cycle  ·  ↑/↓ for history  ·  / for commands' : 'enter to send  ·  shift+enter newline  ·  @ to attach';
+    // An armed first-Esc surfaces here so the operator knows the second cancels.
+    const baseHints = escArmed && status.status === 'running'
+        ? 'press esc again to cancel'
+        : width < 90
+            ? status.status === 'running' ? 'ctrl+c stop · enter queue' : 'enter send · / commands'
+            : status.status === 'running' ? 'ctrl+c to stop  ·  enter to queue  ·  ctrl+o expand' : transcript.length === 0 ? 'shift+tab to cycle  ·  ↑/↓ for history  ·  / for commands' : 'enter to send  ·  shift+enter newline  ·  @ to attach';
     const hints = maxTop > 0 && isFullscreen ? `${baseHints}  ·  PgUp/Dn scroll` : baseHints;
     // I1 structural guard: the frame can never exceed terminal rows. Even if a
     // child mis-measures, the root clips — the input/status stay on screen and
@@ -747,7 +1025,7 @@ export function App(props) {
                                     const marker = isExpanded ? g('expanded') : g('collapsed');
                                     const markerColor = gr.status === 'error' ? tokens.colors.err : gr.status === 'running' ? tokens.colors.warn : tokens.colors.ok;
                                     const running = gr.status === 'running';
-                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), running ? _jsxs(Text, { color: markerColor, children: [_jsx(Spinner, { type: "dots" }), " "] }) : null, _jsxs(Text, { color: markerColor, children: [marker, " ", verbLine] }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", right] })] }), isExpanded ? (_jsxs(_Fragment, { children: [gr.items.slice(0, 12).map((it) => {
+                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), running ? _jsxs(Text, { color: markerColor, children: [_jsx(Spinner, { type: "dots" }), " "] }) : null, _jsxs(Text, { color: markerColor, children: [marker, " ", redact(verbLine)] }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", right] })] }), isExpanded ? (_jsxs(_Fragment, { children: [gr.items.slice(0, 12).map((it) => {
                                                         let friendly = '';
                                                         try {
                                                             const a = JSON.parse(it.args);
@@ -765,12 +1043,12 @@ export function App(props) {
                                                         catch {
                                                             friendly = it.args.slice(0, 40);
                                                         }
-                                                        return (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: tokens.colors.guide, children: [g('end'), " "] }), _jsx(Text, { color: tokens.colors.dim, children: friendly })] }, it.id));
+                                                        return (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: tokens.colors.guide, children: [g('end'), " "] }), _jsx(Text, { color: tokens.colors.dim, children: redact(friendly) })] }, it.id));
                                                     }), gr.items.length > 12 ? (_jsx(Box, { paddingLeft: 4, children: _jsxs(Text, { color: tokens.colors.dim, children: ["\u2026 ", gr.items.length - 12, " more"] }) })) : null] })) : null] }, gr.id));
                                 }
                                 const it = item;
                                 if (it.kind === 'text' && it.role === 'user') {
-                                    return _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsx(Text, { wrap: "wrap", children: it.text })] }, it.id);
+                                    return _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsx(Text, { wrap: "wrap", children: redact(it.text) })] }, it.id);
                                 }
                                 if (it.kind === 'text') {
                                     // prose — render markdown, not raw **, with proper wrap and guide
@@ -778,15 +1056,15 @@ export function App(props) {
                                 }
                                 // Ephemeral reasoning: light-white while working, removed on response.
                                 if (it.kind === 'thinking')
-                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsx(Text, { wrap: "wrap", color: tokens.colors.dim, children: it.text }) }, it.id);
+                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsx(Text, { wrap: "wrap", color: tokens.colors.dim, children: redact(it.text) }) }, it.id);
                                 if (it.kind === 'error')
-                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.err, children: ["  ", g('guide'), "   ", g('failure'), " ", it.message] }) }, it.id);
+                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.err, children: ["  ", g('guide'), "   ", g('failure'), " ", redact(it.message)] }) }, it.id);
                                 if (it.kind === 'policy')
                                     return null;
                                 if (it.kind === 'file_changed')
-                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.dim, children: ["  ", g('guide'), "   ", g('editsBadge'), " ", it.path, "  ", it.op] }) }, it.id);
+                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.dim, children: ["  ", g('guide'), "   ", g('editsBadge'), " ", redact(it.path), "  ", it.op] }) }, it.id);
                                 if (it.kind === 'diff')
-                                    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: tokens.colors.soft, children: it.summary ?? 'Diff' }), it.hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Text, { color: tokens.colors.soft, children: h.path }), h.lines.map((l, j) => (_jsxs(Text, { wrap: "wrap", color: l.kind === 'add' ? tokens.colors.ok : l.kind === 'remove' ? tokens.colors.err : tokens.colors.dim, children: [l.kind === 'add' ? '+ ' : l.kind === 'remove' ? '- ' : '  ', l.text] }, j)))] }, i)))] }, it.id));
+                                    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: tokens.colors.soft, children: it.summary ?? 'Diff' }), it.hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Text, { color: tokens.colors.soft, children: h.path }), h.lines.map((l, j) => (_jsxs(Text, { wrap: "wrap", color: l.kind === 'add' ? tokens.colors.ok : l.kind === 'remove' ? tokens.colors.err : tokens.colors.dim, children: [l.kind === 'add' ? '+ ' : l.kind === 'remove' ? '- ' : '  ', redact(l.text)] }, j)))] }, i)))] }, it.id));
                                 return null;
-                            }) : null, showThinking && status.status === 'running' && !streamingIdRef.current ? (_jsxs(Box, { paddingLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: tokens.colors.accent, children: [_jsx(Spinner, { type: "dots" }), " "] }), _jsx(Text, { color: tokens.colors.dim, children: "Thinking... (esc to cancel)" }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", (elapsed / 1000).toFixed(1), "s"] })] })) : null, showPlan && plan.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { bold: true, children: [g('todoPlan'), " Plan  ", plan.filter((p) => p.status === 'done').length, "/", plan.length] })] }), plan.slice(0, 8).map((p, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: p.status === 'done' ? tokens.colors.ok : p.status === 'in_progress' ? tokens.colors.accent : tokens.colors.dim, children: [p.status === 'done' ? g('todoDone') : p.status === 'in_progress' ? g('todoActive') : g('todoPending'), " ", i + 1, ". ", p.title] })] }, p.id)))] })) : null, showQueued && queuedInputs.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: queuedInputs.map((q, i) => (_jsxs(Text, { color: tokens.colors.dim, children: ["queued: ", q.slice(0, 60), i === 0 ? '  esc to drop' : ''] }, i))) })) : null] }), isFullscreen ? (_jsx(Box, { flexDirection: "column", width: 1, marginLeft: 1, children: Array.from({ length: trackH }).map((_, i) => (_jsx(Text, { color: i === thumbPos ? tokens.colors.accent : tokens.colors.guide, children: i === thumbPos ? '●' : '│' }, i))) })) : null] }), pinned && pendingNew > 0 ? (_jsx(Box, { justifyContent: "flex-end", paddingX: 1, flexShrink: 0, children: _jsxs(Text, { backgroundColor: tokens.colors.accentSoft, color: tokens.colors.accent, bold: true, children: [' ↓ ', pendingNew >= 1000 ? '999+ new' : `${pendingNew} new`, ' '] }) })) : null, slashSuggest.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexShrink: 0, children: [slashSuggest.map((s, i) => (_jsxs(Text, { color: i === 0 ? tokens.colors.accent : tokens.colors.dim, children: [i === 0 ? '▸' : ' ', " /", s.name, "  \u2014 ", s.hint] }, s.name))), _jsx(Text, { color: tokens.colors.dim, children: "  tab to complete" })] })) : null, _jsx(ApprovalModal, { bridge: bridge }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) }), _jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsxs(Text, { wrap: "wrap", children: [input || _jsx(Text, { color: tokens.colors.dim, children: "Message Klyro..." }), "|"] })] }), _jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) })] }), _jsxs(Box, { justifyContent: "space-between", flexShrink: 0, children: [_jsxs(Text, { color: tokens.colors.dim, children: [status.status === 'running' ? (_jsxs(Text, { color: tokens.colors.accent, children: [_jsx(Spinner, { type: "dots" }), " working  \u00B7  "] })) : null, baseHints, maxTop > 0 && isFullscreen ? '  ·  PgUp/Dn scroll' : ''] }), _jsxs(Text, { color: tokens.colors.dim, children: [maxTop > 0 && isFullscreen ? `⇅ ${topRow}/${maxTop} · ` : '', cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct, "% ctx \u00B7 ", status.model, status.status === 'running' ? ' ●' : ''] })] })] }));
+                            }) : null, showThinking && status.status === 'running' && !streamingIdRef.current ? (_jsxs(Box, { paddingLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: tokens.colors.accent, children: [_jsx(Spinner, { type: "dots" }), " "] }), _jsx(Text, { color: tokens.colors.dim, children: "Thinking... (esc \u00D72 to cancel)" }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", (elapsed / 1000).toFixed(1), "s"] })] })) : null, showPlan && plan.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { bold: true, children: [g('todoPlan'), " Plan  ", plan.filter((p) => p.status === 'done').length, "/", plan.length] })] }), plan.slice(0, 8).map((p, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: p.status === 'done' ? tokens.colors.ok : p.status === 'in_progress' ? tokens.colors.accent : tokens.colors.dim, children: [p.status === 'done' ? g('todoDone') : p.status === 'in_progress' ? g('todoActive') : g('todoPending'), " ", i + 1, ". ", redact(p.title)] })] }, p.id)))] })) : null, showQueued && queuedInputs.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: queuedInputs.map((q, i) => (_jsxs(Text, { color: tokens.colors.dim, children: ["queued: ", redact(q.slice(0, 60)), i === 0 ? '  esc to drop' : ''] }, i))) })) : null] }), isFullscreen && !atBottom ? (_jsx(Box, { flexDirection: "column", width: 1, marginLeft: 1, children: Array.from({ length: trackH }).map((_, i) => (_jsx(Text, { color: i === thumbPos ? tokens.colors.accent : tokens.colors.guide, children: i === thumbPos ? '●' : '│' }, i))) })) : null] }), pinned && badgeLabel(atBottom, pendingNew, status.status !== 'running') ? (_jsx(Box, { justifyContent: "center", flexShrink: 0, children: _jsxs(Text, { backgroundColor: tokens.colors.accentSoft, color: tokens.colors.accent, bold: true, children: [' ', badgeLabel(atBottom, pendingNew, status.status !== 'running'), ' '] }) })) : null, slashSuggest.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, flexShrink: 0, children: [slashSuggest.map((s, i) => (_jsxs(Text, { color: i === 0 ? tokens.colors.accent : tokens.colors.dim, children: [i === 0 ? '▸' : ' ', " /", s.name, "  \u2014 ", s.hint] }, s.name))), _jsx(Text, { color: tokens.colors.dim, children: "  tab to complete" })] })) : null, _jsx(ApprovalModal, { bridge: bridge }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) }), _jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), vimMode === 'normal' ? _jsx(Text, { color: tokens.colors.warn, bold: true, children: "--NORMAL-- " }) : null, _jsx(InputWithCursor, { input: input, cursor: vimCursor })] }), _jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) })] }), _jsxs(Box, { justifyContent: "space-between", flexShrink: 0, children: [_jsxs(Text, { color: tokens.colors.dim, children: [status.status === 'running' ? (_jsxs(Text, { color: tokens.colors.accent, children: [_jsx(Spinner, { type: "dots" }), " working  \u00B7  "] })) : null, baseHints, maxTop > 0 && isFullscreen ? '  ·  PgUp/Dn scroll' : ''] }), _jsxs(Text, { color: tokens.colors.dim, children: [maxTop > 0 && isFullscreen ? `⇅ ${topRow}/${maxTop} · ` : '', cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct, "% ctx \u00B7 ", status.model, status.status === 'running' ? ' ●' : ''] })] })] }));
 }