zerg-ztc 0.1.3 → 0.1.4

package/src/components/InputArea.tsx

@@ -1,5 +1,5 @@
 import React, { useReducer, useCallback } from 'react';
-import { useInput, useStdout } from 'ink';
+import { useInput, useStdout, useApp } from 'ink';
 import { InkNode } from '../ui/ink/index.js';
 import { buildInputAreaView, wrapInputSegments } from '../ui/views/input_area.js';
 import { InputBus, InputKey } from '../ui/core/input.js';
@@ -116,6 +116,14 @@ export const InputArea: React.FC<InputAreaProps> = ({
   const [state, dispatch] = useReducer(reducer, initialState);
   const stateRef = React.useRef(state);
   const [badgePreview, setBadgePreview] = React.useState<string[] | null>(null);
+  const killRingRef = React.useRef<string[]>([]);
+  const killIndexRef = React.useRef<number>(-1);
+
+  // Bracketed paste mode support - buffer paste content between \x1b[200~ and \x1b[201~
+  const pasteBufferRef = React.useRef<string>('');
+  const isPastingRef = React.useRef<boolean>(false);
+  // Ref for handleClipboardImagePaste to avoid circular dependency
+  const handleClipboardImagePasteRef = React.useRef<((target: 'state' | 'overlay') => Promise<void>) | null>(null);
   React.useEffect(() => {
     stateRef.current = state;
     onStateChange?.(state);
@@ -151,6 +159,126 @@ export const InputArea: React.FC<InputAreaProps> = ({
     }
   }, [state.cursor.index, state.segments]);
 
+  const pushKill = useCallback((text: string) => {
+    if (!text) return;
+    const ring = killRingRef.current;
+    ring.unshift(text);
+    if (ring.length > 20) ring.pop();
+    killIndexRef.current = 0;
+  }, []);
+
+  const yank = useCallback((current: InputState) => {
+    const ring = killRingRef.current;
+    if (ring.length === 0) return current;
+    const next = insertText(current, ring[0]);
+    return { ...next, historyIdx: -1 };
+  }, []);
+
+  const yankPop = useCallback((current: InputState) => {
+    const ring = killRingRef.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]);
+    return { ...next, historyIdx: -1 };
+  }, []);
+
+  const killToStart = useCallback((current: InputState): { next: InputState; killed: string } => {
+    const segments = [...current.segments];
+    const cursor = current.cursor;
+    const seg = segments[cursor.index];
+    if (!seg || seg.type !== 'text') return { next: current, killed: '' };
+    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 },
+      killed
+    };
+  }, []);
+
+  const killToEnd = useCallback((current: InputState): { next: InputState; killed: string } => {
+    const segments = [...current.segments];
+    const cursor = current.cursor;
+    const seg = segments[cursor.index];
+    if (!seg || seg.type !== 'text') return { next: current, killed: '' };
+    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 },
+      killed
+    };
+  }, []);
+
+  const killWordBackward = useCallback((current: InputState): { next: InputState; killed: string } => {
+    const segments = [...current.segments];
+    const cursor = current.cursor;
+    const seg = segments[cursor.index];
+    if (!seg || seg.type !== 'text') return { next: current, killed: '' };
+    const before = seg.text.slice(0, cursor.offset);
+    const after = seg.text.slice(cursor.offset);
+    const trimmed = before.replace(/\s+$/, '');
+    const match = trimmed.match(/(\S+)\s*$/);
+    const killStart = match ? trimmed.length - match[1].length : before.length;
+    const killed = before.slice(killStart);
+    seg.text = before.slice(0, killStart) + after;
+    return {
+      next: { ...current, segments, cursor: { index: cursor.index, offset: killStart }, historyIdx: -1 },
+      killed
+    };
+  }, []);
+
+  const killWordForward = useCallback((current: InputState): { next: InputState; killed: string } => {
+    const segments = [...current.segments];
+    const cursor = current.cursor;
+    const seg = segments[cursor.index];
+    if (!seg || seg.type !== 'text') return { next: current, killed: '' };
+    const before = seg.text.slice(0, cursor.offset);
+    const after = seg.text.slice(cursor.offset);
+    const match = after.match(/^(\s*\S+)/);
+    const killed = match ? match[1] : '';
+    seg.text = before + after.slice(killed.length);
+    return {
+      next: { ...current, segments, cursor, historyIdx: -1 },
+      killed
+    };
+  }, []);
+
+  const transposeChars = useCallback((current: InputState): InputState => {
+    const segments = [...current.segments];
+    const cursor = current.cursor;
+    const seg = segments[cursor.index];
+    if (!seg || seg.type !== 'text') return current;
+    const text = seg.text;
+    if (text.length < 2) return current;
+    const idx = cursor.offset === 0 ? 0 : cursor.offset === text.length ? text.length - 2 : cursor.offset - 1;
+    const chars = text.split('');
+    const a = chars[idx];
+    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 };
+  }, []);
+
+  const transposeWords = useCallback((current: InputState): InputState => {
+    const segments = [...current.segments];
+    const cursor = current.cursor;
+    const seg = segments[cursor.index];
+    if (!seg || seg.type !== 'text') return current;
+    const text = seg.text;
+    const left = text.slice(0, cursor.offset);
+    const right = text.slice(cursor.offset);
+    const leftMatch = left.match(/(\S+)\s*$/);
+    const rightMatch = right.match(/^\s*(\S+)/);
+    if (!leftMatch || !rightMatch) return current;
+    const leftWord = leftMatch[1];
+    const rightWord = rightMatch[1];
+    const leftStart = left.length - leftMatch[0].length;
+    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 };
+  }, []);
+
   const inputRenderCount = React.useRef(0);
   React.useEffect(() => {
     inputRenderCount.current += 1;
@@ -168,8 +296,18 @@ export const InputArea: React.FC<InputAreaProps> = ({
     const isCommand = state.segments.length === 1 && state.segments[0].type === 'text' && plainText.startsWith('/');
     if (isCommand) {
       const parts = plainText.slice(1).split(/\s+/);
-      const cmd = parts[0];
+      const cmd = parts[0].toLowerCase();
       const args = parts.slice(1);
+
+      // Handle /pi (paste image) command directly - intercept before passing to onCommand
+      if (cmd === 'pi' || cmd === 'paste-image') {
+        dispatch({ type: 'submit', historyEnabled, historyEntry: serialized });
+        if (handleClipboardImagePasteRef.current) {
+          void handleClipboardImagePasteRef.current('state');
+        }
+        return;
+      }
+
       onCommand?.(cmd, args);
     } else {
       onSubmit(serialized);
@@ -183,7 +321,8 @@ export const InputArea: React.FC<InputAreaProps> = ({
   }, [historyEnabled]);
 
   const { stdout } = useStdout();
-  const overlayEnabled = process.env.ZTC_INPUT_OVERLAY !== '0' && process.env.ZTC_WEB_MIRROR !== '1';
+  const { exit } = useApp();
+  const overlayEnabled = process.env.ZTC_INPUT_OVERLAY === '1' && process.env.ZTC_WEB_MIRROR !== '1';
   const overlayStateRef = React.useRef<InputState>(initialState);
   const overlayBusyRef = React.useRef(false);
   const pasteBusyRef = React.useRef(false);
@@ -295,13 +434,146 @@ export const InputArea: React.FC<InputAreaProps> = ({
     }
   }, [insertTextIntoOverlay, insertTextIntoState, onToast, renderOverlay]);
 
+  // Update ref so handleSubmit can access it
+  handleClipboardImagePasteRef.current = handleClipboardImagePaste;
+
   const handleInput = useCallback((input: string, key: InputKey) => {
+    // Detect Kitty keyboard protocol CSI u sequences
+    // Format: ESC [ <keycode> ; <modifiers> u
+    // Modifiers: 2=shift, 3=alt, 5=ctrl, 9=super/cmd
+    // Check for sequences with or without ESC (Ink may strip it)
+
+    // Ctrl+V or Cmd+V for image paste: [118;5u or [118;9u
+    const kittyPasteV = /\x1b?\[118;[59]u/.test(input);
+    if (kittyPasteV) {
+      void handleClipboardImagePaste('state');
+      return;
+    }
+
+    // Consume any other Kitty sequences to prevent them from being displayed
+    // Match pattern: ESC? [ number ; number u
+    if (/\x1b?\[\d+;\d+u/.test(input)) {
+      // This is a Kitty keyboard sequence - don't display it as text
+      // Extract what key it is and handle accordingly
+      const match = input.match(/\x1b?\[(\d+);(\d+)u/);
+      if (match) {
+        const keycode = parseInt(match[1], 10);
+        const modifier = parseInt(match[2], 10);
+        // Ctrl+C (99;5) or Cmd+C (99;9) - exit the app
+        if (keycode === 99 && (modifier === 5 || modifier === 9)) {
+          exit();
+          return;
+        }
+        // Ctrl+L (108;5) - could add clear screen here if needed
+      }
+      return; // Consume other Kitty sequences
+    }
+
     if (disabled) return;
-    const backspaceFallback = input === '\b' || input === '\x7f';
-    if (backspaceFallback && !key.backspace && !key.delete) {
-      key.backspace = true;
+
+    // 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~';
+    const PASTE_START_SHORT = '[200~';
+    const PASTE_END_FULL = '\x1b[201~';
+    const PASTE_END_SHORT = '[201~';
+
+    const hasPasteStart = input.includes(PASTE_START_FULL) || input.includes(PASTE_START_SHORT);
+    const hasPasteEnd = input.includes(PASTE_END_FULL) || input.includes(PASTE_END_SHORT);
+
+    // Check for paste start marker
+    if (hasPasteStart) {
+      isPastingRef.current = true;
+      // Remove the paste start marker (try both variants)
+      let content = input.replace(PASTE_START_FULL, '').replace(PASTE_START_SHORT, '');
+
+      // Check if paste end is also in this chunk
+      const hasEndInChunk = content.includes(PASTE_END_FULL) || content.includes(PASTE_END_SHORT);
+      if (hasEndInChunk) {
+        let pasteContent = content.replace(PASTE_END_FULL, '').replace(PASTE_END_SHORT, '');
+        // Normalize line endings: \r\n -> \n, \r -> \n
+        pasteContent = pasteContent.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+        isPastingRef.current = false;
+        pasteBufferRef.current = '';
+        // Process the complete paste
+        if (pasteContent.length > 0) {
+          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 } });
+          } else {
+            const next = insertText(state, pasteContent);
+            dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+          }
+        } else {
+          // Empty paste - user may have tried to paste an image
+          // Try to extract image from system clipboard
+          void handleClipboardImagePaste('state');
+        }
+      } else {
+        pasteBufferRef.current = content;
+      }
+      return;
+    }
+
+    // Check for paste end marker
+    if (hasPasteEnd) {
+      // Remove the paste end marker (try both variants)
+      const contentBeforeEnd = input.replace(PASTE_END_FULL, '').replace(PASTE_END_SHORT, '');
+      pasteBufferRef.current += contentBeforeEnd;
+      // Normalize line endings: \r\n -> \n, \r -> \n
+      const pasteContent = pasteBufferRef.current.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+      isPastingRef.current = false;
+      pasteBufferRef.current = '';
+      const lineCount = pasteContent.split('\n').length;
+      // Process the complete paste
+      if (pasteContent.length > 0) {
+        if (lineCount >= PASTE_BADGE_THRESHOLD) {
+          const next = insertBadge(state, { type: 'paste', text: pasteContent });
+          dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+        } else {
+          const next = insertText(state, pasteContent);
+          dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+        }
+      } else {
+        // Empty paste - user may have tried to paste an image
+        // Try to extract image from system clipboard
+        void handleClipboardImagePaste('state');
+      }
+      return;
+    }
+
+    // If we're in the middle of a paste, buffer the content
+    if (isPastingRef.current) {
+      pasteBufferRef.current += input;
+      return;
+    }
+
+    // Detect backspace via explicit key flag or known control codes
+    const backspaceFallback = input === '\b' || input === '\x7f' || input === '\x08';
+    const isBackspace = key.backspace || key.delete || backspaceFallback;
+
+    // Ignore completely empty input events that aren't backspace
+    // (some terminals send spurious empty events)
+    const safeKey = key as InputKey & { tab?: boolean; escape?: boolean };
+    if (
+      input === '' &&
+      !isBackspace &&
+      !safeKey.leftArrow &&
+      !safeKey.rightArrow &&
+      !safeKey.upArrow &&
+      !safeKey.downArrow &&
+      !safeKey.return &&
+      !safeKey.tab &&
+      !safeKey.escape &&
+      !safeKey.ctrl &&
+      !safeKey.meta
+    ) {
+      return;
     }
 
+    // Try to detect Cmd+V / Ctrl+V for image paste
+    // Note: Most terminals intercept Cmd+V, so this may not trigger. Use /pi command instead.
     if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
       void handleClipboardImagePaste('state');
       return;
@@ -352,23 +624,89 @@ export const InputArea: React.FC<InputAreaProps> = ({
       dispatch({ type: 'apply', state: { cursor: { index: state.segments.length, offset: 0 } } });
       return;
     }
+    if (key.ctrl && input === 'b') {
+      dispatch({ type: 'apply', state: moveLeft(state) });
+      return;
+    }
+    if (key.ctrl && input === 'f') {
+      dispatch({ type: 'apply', state: moveRight(state) });
+      return;
+    }
+    if (key.ctrl && input === 'p') {
+      navigateHistory('up');
+      return;
+    }
+    if (key.ctrl && input === 'n') {
+      navigateHistory('down');
+      return;
+    }
 
-    if (key.backspace || key.delete) {
-      const next = key.backspace ? backspace(state) : deleteForward(state);
+    if (isBackspace) {
+      // On macOS, backspace key reports as key.delete=true, so always use backspace() for backward deletion
+      const next = backspace(state);
       dispatch({ type: 'apply', state: next });
       return;
     }
 
     if (key.ctrl && input === 'u') {
-      dispatch({ type: 'apply', state: { segments: [], cursor: { index: 0, offset: 0 } } });
+      const { next, killed } = killToStart(state);
+      pushKill(killed);
+      dispatch({ type: 'apply', state: next });
+      return;
+    }
+    if (key.ctrl && input === 'k') {
+      const { next, killed } = killToEnd(state);
+      pushKill(killed);
+      dispatch({ type: 'apply', state: next });
+      return;
+    }
+    if (key.ctrl && input === 'y') {
+      dispatch({ type: 'apply', state: yank(state) });
+      return;
+    }
+    if (key.meta && input === 'y') {
+      dispatch({ type: 'apply', state: yankPop(state) });
+      return;
+    }
+    if (key.ctrl && input === 't') {
+      dispatch({ type: 'apply', state: transposeChars(state) });
+      return;
+    }
+    if (key.meta && input === 't') {
+      dispatch({ type: 'apply', state: transposeWords(state) });
+      return;
+    }
+    if (key.ctrl && input === 'd') {
+      dispatch({ type: 'apply', state: deleteForward(state) });
       return;
     }
 
     if (key.ctrl && input === 'w') {
-      const next = backspace(moveWordLeft(state));
+      const { next, killed } = killWordBackward(state);
+      pushKill(killed);
+      dispatch({ type: 'apply', state: next });
+      return;
+    }
+    if (key.meta && (input === '\b' || input === '\x7f')) {
+      const { next, killed } = killWordBackward(state);
+      pushKill(killed);
+      dispatch({ type: 'apply', state: next });
+      return;
+    }
+    if (key.meta && input === 'd') {
+      const { next, killed } = killWordForward(state);
+      pushKill(killed);
       dispatch({ type: 'apply', state: next });
       return;
     }
+    if (key.meta && input === 'b') {
+      dispatch({ type: 'apply', state: moveWordLeft(state) });
+      return;
+    }
+    if (key.meta && input === 'f') {
+      dispatch({ type: 'apply', state: moveWordRight(state) });
+      return;
+    }
 
     if (!key.ctrl && !key.meta && input) {
       if (input.includes('\n')) {
@@ -382,14 +720,32 @@ export const InputArea: React.FC<InputAreaProps> = ({
       const next = insertText(state, input);
       dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
     }
-  }, [disabled, handleSubmit, navigateHistory, state]);
+  }, [disabled, exit, handleClipboardImagePaste, handleSubmit, navigateHistory, state]);
 
   const handleOverlayInput = useCallback((input: string, key: InputKey) => {
     if (disabled) return;
-    const backspaceFallback = input === '\b' || input === '\x7f';
-    if (backspaceFallback && !key.backspace && !key.delete) {
-      key.backspace = true;
+    // Detect backspace via explicit key flag or known control codes
+    const backspaceFallback = input === '\b' || input === '\x7f' || input === '\x08';
+    const isBackspace = key.backspace || key.delete || backspaceFallback;
+
+    // Ignore completely empty input events that aren't backspace
+    const safeKey = key as InputKey & { tab?: boolean; escape?: boolean };
+    if (
+      input === '' &&
+      !isBackspace &&
+      !safeKey.leftArrow &&
+      !safeKey.rightArrow &&
+      !safeKey.upArrow &&
+      !safeKey.downArrow &&
+      !safeKey.return &&
+      !safeKey.tab &&
+      !safeKey.escape &&
+      !safeKey.ctrl &&
+      !safeKey.meta
+    ) {
+      return;
     }
+
     const current = overlayStateRef.current;
 
     if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
@@ -404,8 +760,17 @@ export const InputArea: React.FC<InputAreaProps> = ({
         const isCommand = current.segments.length === 1 && current.segments[0].type === 'text' && plainText.startsWith('/');
         if (isCommand) {
           const parts = plainText.slice(1).split(/\s+/);
-          const cmd = parts[0];
+          const cmd = parts[0].toLowerCase();
           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 };
+            renderOverlay(overlayStateRef.current);
+            void handleClipboardImagePaste('overlay');
+            return;
+          }
+
           onCommand?.(cmd, args);
         } else {
           onSubmit(serialized);
@@ -482,21 +847,126 @@ export const InputArea: React.FC<InputAreaProps> = ({
       renderOverlay(overlayStateRef.current);
       return;
     }
+    if (key.ctrl && input === 'b') {
+      overlayStateRef.current = moveLeft(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.ctrl && input === 'f') {
+      overlayStateRef.current = moveRight(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.ctrl && input === '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 }
+        };
+        renderOverlay(overlayStateRef.current);
+      }
+      return;
+    }
+    if (key.ctrl && input === '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 }
+          };
+        }
+        renderOverlay(overlayStateRef.current);
+      }
+      return;
+    }
 
-    if (key.backspace || key.delete) {
-      overlayStateRef.current = key.backspace ? backspace(current) : deleteForward(current);
+    if (isBackspace) {
+      // On macOS, backspace key reports as key.delete=true, so always use backspace() for backward deletion
+      overlayStateRef.current = backspace(current);
       renderOverlay(overlayStateRef.current);
       return;
     }
 
     if (key.ctrl && input === 'u') {
-      overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+      const { next, killed } = killToStart(current);
+      pushKill(killed);
+      overlayStateRef.current = { ...next, history: current.history, historyIdx: -1 };
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.ctrl && input === 'k') {
+      const { next, killed } = killToEnd(current);
+      pushKill(killed);
+      overlayStateRef.current = next;
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.ctrl && input === 'y') {
+      overlayStateRef.current = yank(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.meta && input === 'y') {
+      overlayStateRef.current = yankPop(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.ctrl && input === 't') {
+      overlayStateRef.current = transposeChars(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.meta && input === 't') {
+      overlayStateRef.current = transposeWords(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.ctrl && input === 'd') {
+      overlayStateRef.current = deleteForward(current);
       renderOverlay(overlayStateRef.current);
       return;
     }
 
     if (key.ctrl && input === 'w') {
-      overlayStateRef.current = backspace(moveWordLeft(current));
+      const { next, killed } = killWordBackward(current);
+      pushKill(killed);
+      overlayStateRef.current = next;
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.meta && (input === '\b' || input === '\x7f')) {
+      const { next, killed } = killWordBackward(current);
+      pushKill(killed);
+      overlayStateRef.current = next;
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.meta && input === 'd') {
+      const { next, killed } = killWordForward(current);
+      pushKill(killed);
+      overlayStateRef.current = next;
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.meta && input === 'b') {
+      overlayStateRef.current = moveWordLeft(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+    if (key.meta && input === 'f') {
+      overlayStateRef.current = moveWordRight(current);
       renderOverlay(overlayStateRef.current);
       return;
     }

package/src/components/StatusBar.tsx

@@ -13,6 +13,7 @@ interface StatusBarProps {
   provider?: string;
   model?: string;
   emulationId?: string;
+  inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
   debug?: boolean;
 }
@@ -27,6 +28,7 @@ export const StatusBar: React.FC<StatusBarProps> = ({
   provider,
   model,
   emulationId,
+  inputMode,
   toast,
   debug = false
 }) => {
@@ -40,6 +42,7 @@ export const StatusBar: React.FC<StatusBarProps> = ({
     provider,
     model,
     emulationId,
+    inputMode,
     toast,
     debug
   });

package/src/types.ts

@@ -7,6 +7,7 @@ export type MessageRole = 'user' | 'assistant' | 'tool' | 'system';
 export type ToolStatus = 'pending' | 'running' | 'complete' | 'error';
 
 export type AgentStatus = 'idle' | 'thinking' | 'tool_use' | 'streaming' | 'error';
+export type InputMode = 'queue' | 'interrupt';
 
 export interface ToolCall {
   id: string;