@zergai/ztc 0.4.0-beta.1 → 0.5.0-beta.1

package/dist/components/InputArea.js

@@ -3,6 +3,7 @@ import React, { useReducer, useCallback } from 'react';
 import { useInput, useStdout, useApp } from 'ink';
 import { InkNode } from '../ui/ink/index.js';
 import { buildInputAreaView, wrapInputSegments } from '../ui/views/input_area.js';
+import { PLAN_ACCENT } from '../ui/views/theme.js';
 import { moveVertical } from '../ui/core/input_segments.js';
 import { debugLog } from '../debug/logger.js';
 import chalk from 'chalk';
@@ -16,7 +17,7 @@ import { maybeFilterFillers } from '../utils/dictation_filter.js';
 const useNative = isNativeDictationAvailable();
 const isRecording = () => useNative ? isNativeRecording() : isLegacyRecording();
 const isDictationAvailable = () => useNative ? true : isLegacyDictationAvailable();
-import { createEmptyState, insertText, insertBadge, backspace, deleteForward, moveLeft, moveRight, moveWordLeft, moveWordRight, getPlainText, serializeSegments, PASTE_BADGE_THRESHOLD } from '../ui/core/input_segments.js';
+import { createEmptyState, historyUp, historyDown, recordInputHistory, killInputDraft, yankInputKill, getInputShortcutHint, insertText, insertBadge, expandPasteBadge, backspace, deleteForward, moveLeft, moveRight, moveWordLeft, moveWordRight, getPlainText, serializeSegments, PASTE_BADGE_THRESHOLD } from '../ui/core/input_segments.js';
 // Helper to check for Ctrl key combinations
 // Handles multiple formats:
 // 1. Ink's key.ctrl + letter
@@ -44,56 +45,34 @@ function reducer(state, action) {
     switch (action.type) {
         case 'apply':
             return { ...state, ...action.state };
-        case 'submit': {
-            const history = action.historyEnabled && action.historyEntry
-                ? [...state.history.slice(-100), action.historyEntry]
-                : state.history;
-            return {
-                ...state,
-                segments: [],
-                cursor: { index: 0, offset: 0 },
-                historyIdx: -1,
-                history
-            };
-        }
-        case 'history_nav': {
-            if (!action.historyEnabled || state.history.length === 0)
-                return state;
-            let newIdx;
-            if (action.direction === 'up') {
-                newIdx = state.historyIdx === -1
-                    ? state.history.length - 1
-                    : Math.max(0, state.historyIdx - 1);
-            }
-            else {
-                newIdx = state.historyIdx === -1 ? -1 : state.historyIdx + 1;
-                if (newIdx >= state.history.length)
-                    newIdx = -1;
-            }
-            if (newIdx === -1) {
-                return { ...state, historyIdx: -1, segments: [], cursor: { index: 0, offset: 0 } };
-            }
-            const historyValue = state.history[newIdx];
-            const nextSegments = historyValue.length > 0
-                ? [{ type: 'text', text: historyValue }]
-                : [];
-            return {
-                ...state,
-                historyIdx: newIdx,
-                segments: nextSegments,
-                cursor: { index: nextSegments.length ? 0 : 0, offset: historyValue.length }
-            };
-        }
+        case 'submit':
+            return recordInputHistory(state, action.historyEnabled ? action.historyEntry : undefined, 101);
+        case 'history_nav':
+            return !action.historyEnabled ? state : action.direction === 'up' ? historyUp(state) : historyDown(state);
         default:
             return state;
     }
 }
-export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, onToast, onDictationStateChange, cols = process.stdout.columns || 80, inputBus, disabled = false, placeholder = 'Type a message...', historyEnabled = true, debug = false, cwd = process.cwd(), spinnerLabel, spinnerFrame, passwordMode = false, onCycleMode, }) => {
+export const InputArea = ({ onSubmit, onCancelRun, isRunning = false, onQueue, onCommand, commands = [], onStateChange, onToast, onDictationStateChange, cols = process.stdout.columns || 80, inputBus, clearDraftVersion = 0, disabled = false, mode = 'normal', inputBlocked, placeholder = 'Type a message...', historyEnabled: requestedHistoryEnabled = true, debug = false, cwd = process.cwd(), spinnerLabel, spinnerFrame, passwordMode = false, promptOwner, allowEmptySubmit = false, onCycleMode, }) => {
+    // Password ownership never retains or recalls ordinary composer history.
+    const historyEnabled = requestedHistoryEnabled && !passwordMode;
     const [state, dispatch] = useReducer(reducer, initialState);
+    const clearDraftVersionRef = React.useRef(clearDraftVersion);
     const stateRef = React.useRef(state);
+    const draftRevisionRef = React.useRef(0);
+    const draftSegmentsRef = React.useRef(state.segments);
+    if (process.env.ZTC_INPUT_OVERLAY !== '1' && draftSegmentsRef.current !== state.segments) {
+        draftSegmentsRef.current = state.segments;
+        draftRevisionRef.current += 1;
+    }
     const [badgePreview, setBadgePreview] = React.useState(null);
     const killRingRef = React.useRef([]);
     const killIndexRef = React.useRef(-1);
+    const passwordKillRingRef = React.useRef([]);
+    const passwordKillIndexRef = React.useRef(-1);
+    const activeKillRingRef = passwordMode ? passwordKillRingRef : killRingRef;
+    const activeKillIndexRef = passwordMode ? passwordKillIndexRef : killIndexRef;
+    const passwordOwnershipRef = React.useRef(null);
     const dictationBusyRef = React.useRef(false);
     // Bracketed paste mode support - buffer paste content between \x1b[200~ and \x1b[201~
     const pasteBufferRef = React.useRef('');
@@ -138,34 +117,34 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
     const pushKill = useCallback((text, next) => {
         if (!text)
             return;
-        const ring = killRingRef.current;
+        const ring = activeKillRingRef.current;
         ring.unshift(text);
         if (ring.length > 20)
             ring.pop();
-        killIndexRef.current = 0;
+        activeKillIndexRef.current = 0;
         // A kill that empties the composer reads as losing the prompt — Ctrl+U/Ctrl+K
         // and Ghostty's Cmd+Backspace (encoded as Ctrl+U) all land here. The text is
         // still in the kill ring, so say which key brings it back. Mirrors the
         // Ratatui composer's notice.
         if (next && next.segments.length === 0)
             onToast?.('Cleared · Ctrl+Y restores');
-    }, [onToast]);
+    }, [activeKillRingRef, activeKillIndexRef, onToast]);
     const yank = useCallback((current) => {
-        const ring = killRingRef.current;
+        const ring = activeKillRingRef.current;
         if (ring.length === 0)
             return current;
-        const next = insertText(current, ring[0]);
+        const next = yankInputKill(current, ring[0]);
         return { ...next, historyIdx: -1 };
-    }, []);
+    }, [activeKillRingRef]);
     const yankPop = useCallback((current) => {
-        const ring = killRingRef.current;
+        const ring = activeKillRingRef.current;
         if (ring.length === 0)
             return current;
-        const idx = killIndexRef.current === -1 ? 0 : (killIndexRef.current + 1) % ring.length;
-        killIndexRef.current = idx;
-        const next = insertText(current, ring[idx]);
+        const idx = activeKillIndexRef.current === -1 ? 0 : (activeKillIndexRef.current + 1) % ring.length;
+        activeKillIndexRef.current = idx;
+        const next = yankInputKill(current, ring[idx]);
         return { ...next, historyIdx: -1 };
-    }, []);
+    }, [activeKillRingRef, activeKillIndexRef]);
     const killToStart = useCallback((current) => {
         const segments = [...current.segments];
         const cursor = current.cursor;
@@ -175,7 +154,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const killed = seg.text.slice(0, cursor.offset);
         seg.text = seg.text.slice(cursor.offset);
         return {
-            next: { ...current, segments, cursor: { index: cursor.index, offset: 0 }, historyIdx: -1 },
+            next: { ...current, segments, cursor: { index: cursor.index, offset: 0 } },
             killed
         };
     }, []);
@@ -188,7 +167,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const killed = seg.text.slice(cursor.offset);
         seg.text = seg.text.slice(0, cursor.offset);
         return {
-            next: { ...current, segments, cursor: { index: cursor.index, offset: seg.text.length }, historyIdx: -1 },
+            next: { ...current, segments, cursor: { index: cursor.index, offset: seg.text.length } },
             killed
         };
     }, []);
@@ -206,7 +185,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const killed = before.slice(killStart);
         seg.text = before.slice(0, killStart) + after;
         return {
-            next: { ...current, segments, cursor: { index: cursor.index, offset: killStart }, historyIdx: -1 },
+            next: { ...current, segments, cursor: { index: cursor.index, offset: killStart } },
             killed
         };
     }, []);
@@ -222,7 +201,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const killed = match ? match[1] : '';
         seg.text = before + after.slice(killed.length);
         return {
-            next: { ...current, segments, cursor, historyIdx: -1 },
+            next: { ...current, segments, cursor },
             killed
         };
     }, []);
@@ -241,7 +220,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         chars[idx] = chars[idx + 1];
         chars[idx + 1] = a;
         seg.text = chars.join('');
-        return { ...current, segments, cursor: { index: cursor.index, offset: Math.min(text.length, cursor.offset + 1) }, historyIdx: -1 };
+        return { ...current, segments, cursor: { index: cursor.index, offset: Math.min(text.length, cursor.offset + 1) } };
     }, []);
     const transposeWords = useCallback((current) => {
         const segments = [...current.segments];
@@ -262,7 +241,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const rightEnd = rightMatch[0].length;
         const replacedLeft = left.slice(0, leftStart) + rightWord;
         seg.text = replacedLeft + right.slice(rightEnd);
-        return { ...current, segments, cursor: { index: cursor.index, offset: replacedLeft.length }, historyIdx: -1 };
+        return { ...current, segments, cursor: { index: cursor.index, offset: replacedLeft.length } };
     }, []);
     // Tab completion state
     const tabCompletionAlternativesRef = React.useRef([]);
@@ -282,7 +261,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                 const completed = alts[nextIdx];
                 const newText = `/${completed}`;
                 const newSegments = [{ type: 'text', text: newText }];
-                return { ...current, segments: newSegments, cursor: { index: 0, offset: newText.length }, historyIdx: -1 };
+                return { ...current, segments: newSegments, cursor: { index: 0, offset: newText.length } };
             }
             const matches = commands.filter(c => c.name.startsWith(prefix));
             if (matches.length === 0)
@@ -296,7 +275,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             if (matches.length > 1) {
                 onToast?.(formatCommandCompletionPreview(matches));
             }
-            return { ...current, segments: newSegments, cursor: { index: 0, offset: newText.length }, historyIdx: -1 };
+            return { ...current, segments: newSegments, cursor: { index: 0, offset: newText.length } };
         }
         // Only complete if this looks like a shell command with a path
         // Match: !cd path, !ls path, !cat path, etc.
@@ -337,7 +316,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             ...current,
             segments: newSegments,
             cursor: { index: 0, offset: newText.length },
-            historyIdx: -1
+            historyIdx: current.historyIdx
         };
     }, [cwd, onToast]);
     const inputRenderCount = React.useRef(0);
@@ -348,7 +327,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
     });
     const handleSubmit = useCallback(() => {
         const serialized = serializeSegments(state.segments).trim();
-        if (!serialized)
+        if (!serialized && !allowEmptySubmit)
             return;
         const plainText = getPlainText(state.segments).trim();
         const isCommand = state.segments.length === 1 && state.segments[0].type === 'text' && plainText.startsWith('/');
@@ -367,24 +346,51 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             onCommand?.(cmd, args);
         }
         else {
-            onSubmit(serialized);
+            const saved = structuredClone(state);
+            const submittedRevision = draftRevisionRef.current;
+            onSubmit(serialized, { restore: () => {
+                    if (draftRevisionRef.current !== submittedRevision + 1)
+                        return false;
+                    draftRevisionRef.current += 1;
+                    dispatch({ type: 'apply', state: { segments: saved.segments, cursor: saved.cursor, historyIdx: -1 } });
+                    return true;
+                } });
         }
         dispatch({ type: 'submit', historyEnabled, historyEntry: serialized });
-    }, [state.segments, onSubmit, onCommand, historyEnabled]);
+    }, [state.segments, onSubmit, onCommand, historyEnabled, allowEmptySubmit]);
     const navigateHistory = useCallback((direction) => {
         dispatch({ type: 'history_nav', direction, historyEnabled });
     }, [historyEnabled]);
     const { stdout } = useStdout();
     const { exit } = useApp();
+    const clearComposer = useCallback((current) => {
+        if (onCancelRun?.())
+            return null;
+        if (current.segments.length === 0) {
+            exit();
+            return null;
+        }
+        const kill = killInputDraft(current);
+        killRingRef.current.unshift(kill.killed);
+        if (killRingRef.current.length > 20)
+            killRingRef.current.pop();
+        killIndexRef.current = 0;
+        onToast?.('Cleared · Ctrl+Y restores');
+        return kill.state;
+    }, [onCancelRun, onToast, exit]);
     const overlayEnabled = process.env.ZTC_INPUT_OVERLAY === '1';
     const overlayStateRef = React.useRef(initialState);
     const overlayBusyRef = React.useRef(false);
     const insertTextIntoState = useCallback((text) => {
         const current = stateRef.current;
         const next = insertText(current, text);
-        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+        dispatch({ type: 'apply', state: { ...next } });
     }, []);
     const renderOverlay = useCallback((overlayState) => {
+        if (draftSegmentsRef.current !== overlayState.segments) {
+            draftSegmentsRef.current = overlayState.segments;
+            draftRevisionRef.current += 1;
+        }
         if (!stdout || !stdout.isTTY)
             return;
         if (overlayBusyRef.current)
@@ -393,12 +399,23 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const rows = stdout.rows || 24;
         const statusHeight = 1;
         const cols = stdout.columns || 80;
-        const wrapped = wrapInputSegments(overlayState.segments, overlayState.cursor, cols);
+        let visibleOverlayState = overlayState;
+        if (passwordMode) {
+            visibleOverlayState = {
+                ...overlayState,
+                segments: overlayState.segments.map(segment => segment.type === 'text'
+                    ? { ...segment, text: '•'.repeat(segment.text.length) } : segment),
+            };
+        }
+        const wrapped = wrapInputSegments(visibleOverlayState.segments, visibleOverlayState.cursor, cols);
         const inputLines = Math.max(1, wrapped.lines.length);
-        const inputHeight = inputLines + 4;
+        const plan = mode === 'plan';
+        const inputHeight = inputLines + 4 + (plan ? 1 : 0);
         const startRow = Math.max(1, rows - (inputHeight + statusHeight) + 1);
-        const prompt = disabled ? chalk.gray('❯ ') : chalk.blue('❯ ');
+        const prompt = plan ? chalk.hex(PLAN_ACCENT).bold('❯ ') : disabled ? chalk.gray('❯ ') : chalk.blue('❯ ');
         const lines = [];
+        if (plan)
+            lines.push(chalk.bold(' PLAN ') + chalk.hex(PLAN_ACCENT)('─'.repeat(Math.max(0, cols - 6))));
         if (disabled) {
             lines.push(prompt + chalk.gray(placeholder));
         }
@@ -414,6 +431,9 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                     if (isCursor) {
                         lineText += chalk.inverse(token.text || ' ');
                     }
+                    else if (token.style?.bold && token.style?.badge?.type === 'paste') {
+                        lineText += chalk.yellow.bold(token.text);
+                    }
                     else if (token.style?.color === 'yellow') {
                         lineText += chalk.gray(token.text);
                     }
@@ -427,18 +447,19 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                 lines.push(lineText);
             });
         }
-        const plainText = overlayState.segments.length === 1 && overlayState.segments[0].type === 'text'
-            ? overlayState.segments[0].text
+        const plainText = visibleOverlayState.segments.length === 1 && visibleOverlayState.segments[0].type === 'text'
+            ? visibleOverlayState.segments[0].text
             : '';
         const isCommandMode = plainText.startsWith('/');
         const commandQuery = isCommandMode ? plainText.slice(1).trim() : '';
         const commandMatches = isCommandMode
             ? commands.filter(c => c.name.startsWith(commandQuery)).slice(0, 4)
             : [];
+        const expansionHint = disabled ? null : getInputShortcutHint(overlayState, isRunning, activeKillRingRef.current.length > 0);
         for (let i = 0; i < 4; i += 1) {
             const cmd = commandMatches[i];
             if (!cmd) {
-                lines.push(' ');
+                lines.push(i === 0 && expansionHint ? chalk.gray(expansionHint) : ' ');
                 continue;
             }
             const usage = cmd.usage ? ` ${cmd.usage}` : '';
@@ -454,11 +475,11 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         }
         stdout.write('\x1b[u');
         overlayBusyRef.current = false;
-    }, [commands, disabled, placeholder, stdout]);
+    }, [commands, disabled, placeholder, stdout, passwordMode, cols, mode, isRunning]);
     const insertTextIntoOverlay = useCallback((text) => {
         const current = overlayStateRef.current;
         const next = insertText(current, text);
-        overlayStateRef.current = { ...next, historyIdx: -1 };
+        overlayStateRef.current = { ...next };
         renderOverlay(overlayStateRef.current);
     }, [renderOverlay]);
     // The Ink renderer has no native clipboard bridge. Image pastes are read by
@@ -477,6 +498,16 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const isKittyCtrl = modifier === 5;
         const isKittyMeta = modifier === 9;
         const lowerChar = char.toLowerCase();
+        if (isKittyCtrl && lowerChar === 'c') {
+            const next = clearComposer(state);
+            if (next)
+                dispatch({ type: 'apply', state: next });
+            return;
+        }
+        if (isKittyCtrl && lowerChar === 'x') {
+            dispatch({ type: 'apply', state: expandPasteBadge(state) });
+            return;
+        }
         // Navigation
         if (isKittyCtrl && lowerChar === 'a') {
             dispatch({ type: 'apply', state: { cursor: { index: 0, offset: 0 } } });
@@ -627,7 +658,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             return;
         }
         // Unknown Kitty sequence - don't insert as text
-    }, [disabled, killToEnd, killToStart, killWordBackward, killWordForward, navigateHistory, onDictationStateChange, onToast, pushKill, state, transposeChars, transposeWords, yank, yankPop]);
+    }, [clearComposer, disabled, killToEnd, killToStart, killWordBackward, killWordForward, navigateHistory, onDictationStateChange, onToast, pushKill, state, transposeChars, transposeWords, yank, yankPop]);
     const handleInput = useCallback((input, key) => {
         // Detect Kitty keyboard protocol CSI u sequences
         // Format: ESC [ <keycode> ; <modifiers> u
@@ -648,8 +679,8 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             const modifier = parseInt(kittyMatch[2], 10);
             const isKittyCtrl = modifier === 5;
             const isKittyMeta = modifier === 9;
-            // Ctrl+C (99;5) or Cmd+C (99;9) - exit the app
-            if (keycode === 99 && (isKittyCtrl || isKittyMeta)) {
+            // Ctrl+C follows the composer lifecycle; retain the existing Cmd+C exit.
+            if (keycode === 99 && isKittyMeta) {
                 exit();
                 return;
             }
@@ -669,6 +700,16 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         }
         if (disabled)
             return;
+        if (key.ctrl && isCtrl(input, key, 'c') && !isPastingRef.current) {
+            const next = clearComposer(state);
+            if (next)
+                dispatch({ type: 'apply', state: next });
+            return;
+        }
+        if (key.ctrl && isCtrl(input, key, 'x') && !isPastingRef.current) {
+            dispatch({ type: 'apply', state: expandPasteBadge(state) });
+            return;
+        }
         // Handle bracketed paste mode markers
         // Note: ESC might be stripped or sent separately by Ink, so check both with and without ESC
         const PASTE_START_FULL = '\x1b[200~';
@@ -695,11 +736,11 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                     const lineCount = pasteContent.split('\n').length;
                     if (lineCount >= PASTE_BADGE_THRESHOLD) {
                         const next = insertBadge(state, { type: 'paste', text: pasteContent });
-                        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                        dispatch({ type: 'apply', state: { ...next } });
                     }
                     else {
                         const next = insertText(state, pasteContent);
-                        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                        dispatch({ type: 'apply', state: { ...next } });
                     }
                 }
                 else {
@@ -727,11 +768,11 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             if (pasteContent.length > 0) {
                 if (lineCount >= PASTE_BADGE_THRESHOLD) {
                     const next = insertBadge(state, { type: 'paste', text: pasteContent });
-                    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                    dispatch({ type: 'apply', state: { ...next } });
                 }
                 else {
                     const next = insertText(state, pasteContent);
-                    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                    dispatch({ type: 'apply', state: { ...next } });
                 }
             }
             else {
@@ -780,7 +821,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         // kitty keyboard protocol enabled (macOS Terminal.app, default iTerm2).
         if (key.return && (key.shift || key.meta)) {
             const next = insertText(state, '\n');
-            dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+            dispatch({ type: 'apply', state: { ...next } });
             return;
         }
         // Line-wise movement first (Codex parity): the arrows walk a multi-line
@@ -789,7 +830,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         if (key.upArrow || key.downArrow) {
             const vertical = moveVertical(state, key.upArrow ? -1 : 1);
             if (vertical.moved) {
-                dispatch({ type: 'apply', state: { ...vertical.state, historyIdx: -1 } });
+                dispatch({ type: 'apply', state: { ...vertical.state } });
                 return;
             }
             navigateHistory(key.upArrow ? 'up' : 'down');
@@ -801,6 +842,14 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             return;
         }
         if (safeKey.tab || input === '\t') {
+            const serialized = serializeSegments(state.segments).trim();
+            const plain = getPlainText(state.segments).trim();
+            if (onQueue && serialized && !plain.startsWith('/') && !plain.startsWith('!')) {
+                if (onQueue(serialized)) {
+                    dispatch({ type: 'submit', historyEnabled, historyEntry: serialized });
+                }
+                return;
+            }
             void handleTabComplete(state).then(nextState => {
                 if (nextState !== state) {
                     dispatch({ type: 'apply', state: nextState });
@@ -995,14 +1044,14 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                 const lineCount = input.split('\n').length;
                 if (lineCount >= PASTE_BADGE_THRESHOLD) {
                     const next = insertBadge(state, { type: 'paste', text: input });
-                    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                    dispatch({ type: 'apply', state: { ...next } });
                     return;
                 }
             }
             const next = insertText(state, input);
-            dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+            dispatch({ type: 'apply', state: { ...next } });
         }
-    }, [disabled, exit, handleClipboardImagePaste, handleKittyInput, handleSubmit, navigateHistory, state]);
+    }, [clearComposer, disabled, exit, handleClipboardImagePaste, handleKittyInput, handleSubmit, navigateHistory, state, onQueue, historyEnabled, pushKill, yank, yankPop]);
     // Handle Kitty keyboard protocol sequences for overlay mode
     const handleKittyOverlayInput = useCallback((char, key, keycode, modifier) => {
         if (disabled)
@@ -1011,6 +1060,19 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const isKittyCtrl = modifier === 5;
         const isKittyMeta = modifier === 9;
         const lowerChar = char.toLowerCase();
+        if (isKittyCtrl && lowerChar === 'c') {
+            const next = clearComposer(current);
+            if (next) {
+                overlayStateRef.current = next;
+                renderOverlay(next);
+            }
+            return;
+        }
+        if (isKittyCtrl && lowerChar === 'x') {
+            overlayStateRef.current = expandPasteBadge(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
         // Navigation
         if (isKittyCtrl && lowerChar === 'a') {
             overlayStateRef.current = { ...current, cursor: { index: 0, offset: 0 } };
@@ -1033,36 +1095,15 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             return;
         }
         if (isKittyCtrl && lowerChar === 'p') {
-            if (historyEnabled && current.history.length > 0) {
-                const newIdx = current.historyIdx === -1 ? current.history.length - 1 : Math.max(0, current.historyIdx - 1);
-                const historyValue = current.history[newIdx] || '';
-                overlayStateRef.current = {
-                    ...current,
-                    historyIdx: newIdx,
-                    segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
-                    cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
-                };
+            if (historyEnabled) {
+                overlayStateRef.current = historyUp(current);
                 renderOverlay(overlayStateRef.current);
             }
             return;
         }
         if (isKittyCtrl && lowerChar === 'n') {
-            if (historyEnabled && current.history.length > 0) {
-                let newIdx = current.historyIdx === -1 ? -1 : current.historyIdx + 1;
-                if (newIdx >= current.history.length)
-                    newIdx = -1;
-                if (newIdx === -1) {
-                    overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
-                }
-                else {
-                    const historyValue = current.history[newIdx];
-                    overlayStateRef.current = {
-                        ...current,
-                        historyIdx: newIdx,
-                        segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
-                        cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
-                    };
-                }
+            if (historyEnabled) {
+                overlayStateRef.current = historyDown(current);
                 renderOverlay(overlayStateRef.current);
             }
             return;
@@ -1071,7 +1112,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         if (isKittyCtrl && lowerChar === 'u') {
             const { next, killed } = killToStart(current);
             pushKill(killed, next);
-            overlayStateRef.current = { ...next, history: current.history, historyIdx: -1 };
+            overlayStateRef.current = { ...next, history: current.history };
             renderOverlay(overlayStateRef.current);
             return;
         }
@@ -1119,7 +1160,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                         if (text && text.trim()) {
                             // Filter filler words and submit the transcribed text
                             onSubmit(maybeFilterFillers(text.trim()));
-                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 }, historyIdx: -1 };
+                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 } };
                             renderOverlay(overlayStateRef.current);
                         }
                         else {
@@ -1140,7 +1181,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                         if (result.text && result.text.trim()) {
                             // Filter filler words and submit the transcribed text
                             onSubmit(maybeFilterFillers(result.text.trim()));
-                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 }, historyIdx: -1 };
+                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 } };
                             renderOverlay(overlayStateRef.current);
                         }
                         else {
@@ -1205,7 +1246,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             return;
         }
         // Unknown Kitty sequence - don't insert as text
-    }, [disabled, historyEnabled, killToEnd, killToStart, killWordBackward, killWordForward, onDictationStateChange, onToast, pushKill, renderOverlay, transposeChars, transposeWords, yank, yankPop]);
+    }, [clearComposer, disabled, historyEnabled, killToEnd, killToStart, killWordBackward, killWordForward, onDictationStateChange, onToast, pushKill, renderOverlay, transposeChars, transposeWords, yank, yankPop]);
     const handleOverlayInput = useCallback((input, key) => {
         if (disabled)
             return;
@@ -1237,13 +1278,38 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             return;
         }
         const current = overlayStateRef.current;
+        if (key.ctrl && isCtrl(input, key, 'c')) {
+            const next = clearComposer(current);
+            if (next) {
+                overlayStateRef.current = next;
+                renderOverlay(next);
+            }
+            return;
+        }
+        if (key.ctrl && isCtrl(input, key, 'x')) {
+            overlayStateRef.current = expandPasteBadge(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if ((safeKey.tab || input === '\t') && !safeKey.shift) {
+            const serialized = serializeSegments(current.segments).trim();
+            const plain = getPlainText(current.segments).trim();
+            if (onQueue && serialized && !plain.startsWith('/') && !plain.startsWith('!')) {
+                if (onQueue(serialized)) {
+                    const history = historyEnabled ? [...current.history.slice(-100), serialized] : current.history;
+                    overlayStateRef.current = { ...createEmptyState(), history, historyIdx: -1 };
+                    renderOverlay(overlayStateRef.current);
+                }
+                return;
+            }
+        }
         if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
             void handleClipboardImagePaste('overlay');
             return;
         }
         if (key.return && !key.shift && !key.meta) {
             const serialized = serializeSegments(current.segments).trim();
-            if (serialized) {
+            if (serialized || allowEmptySubmit) {
                 const plainText = getPlainText(current.segments).trim();
                 const isCommand = current.segments.length === 1 && current.segments[0].type === 'text' && plainText.startsWith('/');
                 if (isCommand) {
@@ -1252,7 +1318,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                     const args = parts.slice(1);
                     // Handle /pi (paste image) command directly
                     if (cmd === 'pi' || cmd === 'paste-image') {
-                        overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+                        overlayStateRef.current = recordInputHistory(current, historyEnabled ? serialized : undefined, 101);
                         renderOverlay(overlayStateRef.current);
                         void handleClipboardImagePaste('overlay');
                         return;
@@ -1260,18 +1326,25 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                     onCommand?.(cmd, args);
                 }
                 else {
-                    onSubmit(serialized);
-                }
-                if (historyEnabled) {
-                    current.history = [...current.history.slice(-100), serialized];
+                    const saved = structuredClone(current);
+                    const submittedRevision = draftRevisionRef.current;
+                    onSubmit(serialized, { restore: () => {
+                            if (draftRevisionRef.current !== submittedRevision + 1)
+                                return false;
+                            draftRevisionRef.current += 1;
+                            overlayStateRef.current = { ...overlayStateRef.current,
+                                segments: saved.segments, cursor: saved.cursor, historyIdx: -1 };
+                            renderOverlay(overlayStateRef.current);
+                            return true;
+                        } });
                 }
             }
-            overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+            overlayStateRef.current = recordInputHistory(current, historyEnabled && serialized ? serialized : undefined, 101);
             renderOverlay(overlayStateRef.current);
             return;
         }
         if (key.return && (key.shift || key.meta)) {
-            overlayStateRef.current = { ...insertText(current, '\n'), historyIdx: -1 };
+            overlayStateRef.current = { ...insertText(current, '\n') };
             renderOverlay(overlayStateRef.current);
             return;
         }
@@ -1279,32 +1352,12 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             const direction = key.upArrow ? 'up' : 'down';
             const vertical = moveVertical(current, direction === 'up' ? -1 : 1);
             if (vertical.moved) {
-                overlayStateRef.current = { ...vertical.state, historyIdx: -1 };
+                overlayStateRef.current = { ...vertical.state };
                 renderOverlay(overlayStateRef.current);
                 return;
             }
-            if (historyEnabled && current.history.length > 0) {
-                let newIdx;
-                if (direction === 'up') {
-                    newIdx = current.historyIdx === -1 ? current.history.length - 1 : Math.max(0, current.historyIdx - 1);
-                }
-                else {
-                    newIdx = current.historyIdx === -1 ? -1 : current.historyIdx + 1;
-                    if (newIdx >= current.history.length)
-                        newIdx = -1;
-                }
-                if (newIdx === -1) {
-                    overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
-                }
-                else {
-                    const historyValue = current.history[newIdx];
-                    overlayStateRef.current = {
-                        ...current,
-                        historyIdx: newIdx,
-                        segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
-                        cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
-                    };
-                }
+            if (historyEnabled) {
+                overlayStateRef.current = key.upArrow ? historyUp(current) : historyDown(current);
                 renderOverlay(overlayStateRef.current);
             }
             return;
@@ -1351,36 +1404,15 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         }
         if (isCtrl(input, key, 'p')) {
             const direction = 'up';
-            if (historyEnabled && current.history.length > 0) {
-                let newIdx = current.historyIdx === -1 ? current.history.length - 1 : Math.max(0, current.historyIdx - 1);
-                const historyValue = current.history[newIdx] || '';
-                overlayStateRef.current = {
-                    ...current,
-                    historyIdx: newIdx,
-                    segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
-                    cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
-                };
+            if (historyEnabled) {
+                overlayStateRef.current = historyUp(current);
                 renderOverlay(overlayStateRef.current);
             }
             return;
         }
         if (isCtrl(input, key, 'n')) {
-            if (historyEnabled && current.history.length > 0) {
-                let newIdx = current.historyIdx === -1 ? -1 : current.historyIdx + 1;
-                if (newIdx >= current.history.length)
-                    newIdx = -1;
-                if (newIdx === -1) {
-                    overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
-                }
-                else {
-                    const historyValue = current.history[newIdx];
-                    overlayStateRef.current = {
-                        ...current,
-                        historyIdx: newIdx,
-                        segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
-                        cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
-                    };
-                }
+            if (historyEnabled) {
+                overlayStateRef.current = historyDown(current);
                 renderOverlay(overlayStateRef.current);
             }
             return;
@@ -1391,7 +1423,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             if (key.meta || key.ctrl) {
                 const { next, killed } = killWordBackward(current);
                 pushKill(killed, next);
-                overlayStateRef.current = { ...next, history: current.history, historyIdx: -1 };
+                overlayStateRef.current = { ...next, history: current.history };
             }
             else {
                 overlayStateRef.current = backspace(current);
@@ -1402,7 +1434,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         if (isCtrl(input, key, 'u')) {
             const { next, killed } = killToStart(current);
             pushKill(killed, next);
-            overlayStateRef.current = { ...next, history: current.history, historyIdx: -1 };
+            overlayStateRef.current = { ...next, history: current.history };
             renderOverlay(overlayStateRef.current);
             return;
         }
@@ -1431,7 +1463,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                         if (text && text.trim()) {
                             // Filter filler words and submit the transcribed text
                             onSubmit(maybeFilterFillers(text.trim()));
-                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 }, historyIdx: -1 };
+                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 } };
                             renderOverlay(overlayStateRef.current);
                         }
                         else {
@@ -1452,7 +1484,7 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                         if (result.text && result.text.trim()) {
                             // Filter filler words and submit the transcribed text
                             onSubmit(maybeFilterFillers(result.text.trim()));
-                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 }, historyIdx: -1 };
+                            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 } };
                             renderOverlay(overlayStateRef.current);
                         }
                         else {
@@ -1552,42 +1584,84 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             else {
                 overlayStateRef.current = insertText(current, input);
             }
-            overlayStateRef.current = { ...overlayStateRef.current, historyIdx: -1 };
+            overlayStateRef.current = { ...overlayStateRef.current };
             renderOverlay(overlayStateRef.current);
         }
-    }, [disabled, handleKittyOverlayInput, historyEnabled, onCommand, onSubmit, renderOverlay]);
-    useInput((input, key) => {
+    }, [clearComposer, disabled, handleKittyOverlayInput, historyEnabled, onCommand, onSubmit, onQueue, renderOverlay, pushKill, yank, yankPop, allowEmptySubmit]);
+    const currentInputHandler = (input, key) => {
+        if (inputBlocked?.())
+            return;
         if (overlayEnabled) {
             handleOverlayInput(input, key);
             return;
         }
         handleInput(input, key);
-    });
+    };
+    const inputHandlerRef = React.useRef(currentInputHandler);
+    React.useLayoutEffect(() => {
+        inputHandlerRef.current = currentInputHandler;
+    }, [currentInputHandler]);
+    // Ink subscribes in a passive effect. Keep that subscription stable, while
+    // committed draft and prompt ownership reach the listener before the next key.
+    const dispatchInput = useCallback((input, key) => {
+        inputHandlerRef.current(input, key);
+    }, []);
+    useInput(dispatchInput);
     React.useEffect(() => {
         if (!inputBus)
             return;
-        return inputBus.subscribe(({ input, key }) => {
-            if (overlayEnabled) {
-                handleOverlayInput(input, key);
-                return;
-            }
-            handleInput(input, key);
-        });
-    }, [handleInput, handleOverlayInput, inputBus, overlayEnabled]);
+        return inputBus.subscribe(({ input, key }) => dispatchInput(input, key));
+    }, [dispatchInput, inputBus]);
     React.useEffect(() => {
         if (!overlayEnabled)
             return;
         renderOverlay(overlayStateRef.current);
     }, [overlayEnabled, renderOverlay]);
+    React.useLayoutEffect(() => {
+        const previous = passwordOwnershipRef.current;
+        if (previous && previous.passwordMode === passwordMode && previous.promptOwner === promptOwner)
+            return;
+        passwordOwnershipRef.current = { passwordMode, promptOwner };
+        // Each password owner can recall ordinary cuts without retaining another
+        // owner's private cuts or changing the ordinary ring's order/index.
+        passwordKillRingRef.current = passwordMode ? [...killRingRef.current] : [];
+        passwordKillIndexRef.current = passwordMode ? killIndexRef.current : -1;
+        if (previous?.passwordMode && passwordMode && previous.promptOwner !== promptOwner) {
+            dispatch({ type: 'submit', historyEnabled: false });
+            if (overlayEnabled) {
+                draftRevisionRef.current += 1;
+                overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 }, historyIdx: -1 };
+                renderOverlay(overlayStateRef.current);
+            }
+        }
+    }, [passwordMode, promptOwner, overlayEnabled, renderOverlay]);
+    React.useLayoutEffect(() => {
+        if (clearDraftVersionRef.current === clearDraftVersion)
+            return;
+        clearDraftVersionRef.current = clearDraftVersion;
+        passwordKillRingRef.current = [];
+        passwordKillIndexRef.current = -1;
+        dispatch({ type: 'submit', historyEnabled: false });
+        if (overlayEnabled) {
+            draftRevisionRef.current += 1;
+            overlayStateRef.current = { ...overlayStateRef.current, segments: [], cursor: { index: 0, offset: 0 }, historyIdx: -1 };
+            renderOverlay(overlayStateRef.current);
+        }
+    }, [clearDraftVersion, overlayEnabled, renderOverlay]);
     // Create masked state for password mode
+    const visibleState = clearDraftVersionRef.current !== clearDraftVersion
+        ? { ...state, segments: [], cursor: { index: 0, offset: 0 } }
+        : state;
     const displayState = passwordMode ? {
-        ...state,
-        segments: state.segments.map(seg => seg.type === 'text' ? { ...seg, text: '•'.repeat(seg.text.length) } : seg)
-    } : state;
+        ...visibleState,
+        segments: visibleState.segments.map(seg => seg.type === 'text' ? { ...seg, text: '•'.repeat(seg.text.length) } : seg)
+    } : visibleState;
     const node = buildInputAreaView({
         state: displayState,
         placeholder,
         disabled,
+        mode,
+        isRunning,
         commands,
         cols,
         badgePreview,