zerg-ztc 0.1.10 → 0.1.12

package/src/components/InputArea.tsx

@@ -1,1096 +0,0 @@
-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 { InputBus, InputKey } from '../ui/core/input.js';
-import { InputState, InputSegment } from '../ui/core/input_state.js';
-import { debugLog } from '../debug/logger.js';
-import chalk from 'chalk';
-import { saveClipboardImage } from '../utils/clipboard_image.js';
-import { renderImagePreview } from '../utils/image_preview.js';
-import { completePath } from '../utils/path_complete.js';
-import {
-  createEmptyState,
-  insertText,
-  insertSegment,
-  insertBadge,
-  backspace,
-  deleteForward,
-  moveLeft,
-  moveRight,
-  moveWordLeft,
-  moveWordRight,
-  getPlainText,
-  serializeSegments,
-  PASTE_BADGE_THRESHOLD
-} from '../ui/core/input_segments.js';
-
-interface InputAreaProps {
-  onSubmit: (text: string) => void;
-  onCommand?: (command: string, args: string[]) => void;
-  commands?: Array<{
-    name: string;
-    description: string;
-    usage?: string;
-  }>;
-  onStateChange?: (state: InputState) => void;
-  onToast?: (message: string) => void;
-  cols?: number;
-  inputBus?: InputBus;
-  disabled?: boolean;
-  placeholder?: string;
-  historyEnabled?: boolean;
-  debug?: boolean;
-  cwd?: string;  // Working directory for path tab completion
-}
-
-export type { InputState } from '../ui/core/input_state.js';
-
-type InputAction =
-  | { type: 'apply'; state: Partial<InputState> }
-  | { type: 'submit'; historyEnabled: boolean; historyEntry?: string }
-  | { type: 'history_nav'; direction: 'up' | 'down'; historyEnabled: boolean };
-
-const initialState: InputState = createEmptyState();
-
-function reducer(state: InputState, action: InputAction): InputState {
-  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: number;
-      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: InputSegment[] = historyValue.length > 0
-        ? [{ type: 'text', text: historyValue }]
-        : [];
-      return {
-        ...state,
-        historyIdx: newIdx,
-        segments: nextSegments,
-        cursor: { index: nextSegments.length ? 0 : 0, offset: historyValue.length }
-      };
-    }
-    default:
-      return state;
-  }
-}
-
-export const InputArea: React.FC<InputAreaProps> = ({
-  onSubmit,
-  onCommand,
-  commands = [],
-  onStateChange,
-  onToast,
-  cols = process.stdout.columns || 80,
-  inputBus,
-  disabled = false,
-  placeholder = 'Type a message...',
-  historyEnabled = true,
-  debug = false,
-  cwd = process.cwd()
-}) => {
-  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);
-  }, [onStateChange, state]);
-
-  React.useEffect(() => {
-    const segment = state.segments[state.cursor.index];
-    if (!segment || segment.type === 'text') {
-      setBadgePreview(null);
-      return;
-    }
-    if (segment.type === 'paste') {
-      const lines = segment.text.split('\n');
-      const preview = lines.slice(0, 3);
-      if (lines.length > 3) preview.push('…');
-      setBadgePreview(preview);
-      return;
-    }
-    if (segment.type === 'file') {
-      setBadgePreview([`[file] ${segment.path}`]);
-      return;
-    }
-    if (segment.type === 'image') {
-      renderImagePreview(segment.path, 40, 16).then(result => {
-        if (result && result.length > 0) {
-          setBadgePreview(result);
-        } else {
-          setBadgePreview([`[image] ${segment.path}`, 'Install chafa for preview.']);
-        }
-      }).catch(() => {
-        setBadgePreview([`[image] ${segment.path}`]);
-      });
-    }
-  }, [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 };
-  }, []);
-
-  // Tab completion state
-  const tabCompletionAlternativesRef = React.useRef<string[]>([]);
-  const lastTabPrefixRef = React.useRef<string>('');
-
-  // Handle tab completion for shell commands
-  const handleTabComplete = useCallback(async (current: InputState): Promise<InputState> => {
-    const plainText = getPlainText(current.segments);
-
-    // Only complete if this looks like a shell command with a path
-    // Match: !cd path, !ls path, !cat path, etc.
-    const shellMatch = plainText.match(/^!(\w+)\s+(.*)$/);
-    if (!shellMatch) {
-      // Also support just !cd without a path yet
-      if (plainText.match(/^!cd\s*$/)) {
-        // Show home directory
-        const result = await completePath('~/', cwd);
-        if (result && result.alternatives.length > 0) {
-          tabCompletionAlternativesRef.current = result.alternatives;
-          onToast?.(`Completions: ${result.alternatives.slice(0, 5).join(', ')}${result.alternatives.length > 5 ? '...' : ''}`);
-        }
-      }
-      return current;
-    }
-
-    const partialPath = shellMatch[2];
-    const commandPrefix = `!${shellMatch[1]} `;
-
-    // Try to complete the path
-    const result = await completePath(partialPath, cwd);
-    if (!result) {
-      onToast?.('No completions');
-      return current;
-    }
-
-    // If we have alternatives and this is a repeat tab, show them
-    if (result.alternatives.length > 1) {
-      tabCompletionAlternativesRef.current = result.alternatives;
-      lastTabPrefixRef.current = partialPath;
-      onToast?.(`Completions: ${result.alternatives.slice(0, 6).join('  ')}${result.alternatives.length > 6 ? ' ...' : ''}`);
-    } else {
-      tabCompletionAlternativesRef.current = [];
-    }
-
-    // Update the input with the completed path
-    const newText = commandPrefix + result.completed;
-    const newSegments: InputSegment[] = [{ type: 'text', text: newText }];
-    return {
-      ...current,
-      segments: newSegments,
-      cursor: { index: 0, offset: newText.length },
-      historyIdx: -1
-    };
-  }, [cwd, onToast]);
-
-  const inputRenderCount = React.useRef(0);
-  React.useEffect(() => {
-    inputRenderCount.current += 1;
-    const totalLength = state.segments.reduce((acc, segment) => (
-      segment.type === 'text' ? acc + segment.text.length : acc + 0
-    ), 0);
-    debugLog(`InputArea render #${inputRenderCount.current} (valueLen=${totalLength})`);
-  });
-
-  const handleSubmit = useCallback(() => {
-    const serialized = serializeSegments(state.segments).trim();
-    if (!serialized) return;
-
-    const plainText = getPlainText(state.segments).trim();
-    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].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);
-    }
-
-    dispatch({ type: 'submit', historyEnabled, historyEntry: serialized });
-  }, [state.segments, onSubmit, onCommand, historyEnabled]);
-
-  const navigateHistory = useCallback((direction: 'up' | 'down') => {
-    dispatch({ type: 'history_nav', direction, historyEnabled });
-  }, [historyEnabled]);
-
-  const { stdout } = useStdout();
-  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);
-
-  const insertTextIntoState = useCallback((text: string) => {
-    const current = stateRef.current;
-    const next = insertText(current, text);
-    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
-  }, []);
-
-  const renderOverlay = useCallback((overlayState: InputState) => {
-    if (!stdout || !stdout.isTTY) return;
-    if (overlayBusyRef.current) return;
-    overlayBusyRef.current = true;
-
-    const rows = stdout.rows || 24;
-    const statusHeight = 1;
-    const cols = stdout.columns || 80;
-    const wrapped = wrapInputSegments(overlayState.segments, overlayState.cursor, cols);
-    const inputLines = Math.max(1, wrapped.lines.length);
-    const inputHeight = inputLines + 4;
-    const startRow = Math.max(1, rows - (inputHeight + statusHeight) + 1);
-
-    const prompt = disabled ? chalk.gray('❯ ') : chalk.blue('❯ ');
-
-    const lines: string[] = [];
-    if (disabled) {
-      lines.push(prompt + chalk.gray(placeholder));
-    } else if (overlayState.segments.length === 0) {
-      lines.push(prompt + chalk.inverse('|') + chalk.gray(placeholder));
-    } else {
-      wrapped.lines.forEach((lineTokens, index) => {
-        const prefix = index === 0 ? prompt : '  ';
-        let lineText = prefix;
-        lineTokens.forEach((token, tokenIndex) => {
-          const isCursor = index === wrapped.cursorLine && tokenIndex === wrapped.cursorCol;
-          if (isCursor) {
-            lineText += chalk.inverse(token.text || ' ');
-          } else if (token.style?.color === 'yellow') {
-            lineText += chalk.gray(token.text);
-          } else {
-            lineText += token.text;
-          }
-        });
-        if (index === wrapped.cursorLine && wrapped.cursorCol === lineTokens.length) {
-          lineText += chalk.inverse(' ');
-        }
-        lines.push(lineText);
-      });
-    }
-
-    const plainText = overlayState.segments.length === 1 && overlayState.segments[0].type === 'text'
-      ? overlayState.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)
-      : [];
-
-    for (let i = 0; i < 4; i += 1) {
-      const cmd = commandMatches[i];
-      if (!cmd) {
-        lines.push(' ');
-        continue;
-      }
-      const usage = cmd.usage ? ` ${cmd.usage}` : '';
-      const line = `${chalk.cyan.bold(`/${cmd.name}`)}${chalk.white(usage)}${chalk.gray(` — ${cmd.description}`)}`;
-      lines.push(line);
-    }
-
-    stdout.write('\x1b[s');
-    for (let i = 0; i < inputHeight; i += 1) {
-      const row = startRow + i;
-      const raw = lines[i] || '';
-      const trimmed = raw.length > cols ? raw.slice(0, cols) : raw;
-      stdout.write(`\x1b[${row};1H\x1b[2K${trimmed}`);
-    }
-    stdout.write('\x1b[u');
-    overlayBusyRef.current = false;
-  }, [commands, disabled, placeholder, stdout]);
-
-  const insertTextIntoOverlay = useCallback((text: string) => {
-    const current = overlayStateRef.current;
-    const next = insertText(current, text);
-    overlayStateRef.current = { ...next, historyIdx: -1 };
-    renderOverlay(overlayStateRef.current);
-  }, [renderOverlay]);
-
-  const handleClipboardImagePaste = useCallback(async (target: 'state' | 'overlay') => {
-    if (pasteBusyRef.current) return;
-    pasteBusyRef.current = true;
-    try {
-      const path = await saveClipboardImage();
-      if (!path) return;
-      onToast?.(`Image saved to ${path}`);
-      if (target === 'overlay') {
-        const current = overlayStateRef.current;
-        const next = insertBadge(current, { type: 'image', path });
-        overlayStateRef.current = { ...next, historyIdx: -1 };
-        renderOverlay(overlayStateRef.current);
-      } else {
-        const current = stateRef.current;
-        const next = insertBadge(current, { type: 'image', path });
-        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
-      }
-    } finally {
-      pasteBusyRef.current = false;
-    }
-  }, [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;
-
-    // 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;
-    }
-
-    if (key.return && !key.shift) {
-      handleSubmit();
-      return;
-    }
-
-    if (key.return && key.shift) {
-      const next = insertText(state, '\n');
-      dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
-      return;
-    }
-
-    if (key.upArrow) {
-      navigateHistory('up');
-      return;
-    }
-    if (key.downArrow) {
-      navigateHistory('down');
-      return;
-    }
-
-    // Tab completion for shell commands
-    if (safeKey.tab || input === '\t') {
-      void handleTabComplete(state).then(nextState => {
-        if (nextState !== state) {
-          dispatch({ type: 'apply', state: nextState });
-        }
-      });
-      return;
-    }
-
-    if (key.leftArrow) {
-      if (key.ctrl) {
-        dispatch({ type: 'apply', state: moveWordLeft(state) });
-      } else {
-        dispatch({ type: 'apply', state: moveLeft(state) });
-      }
-      return;
-    }
-    if (key.rightArrow) {
-      if (key.ctrl) {
-        dispatch({ type: 'apply', state: moveWordRight(state) });
-      } else {
-        dispatch({ type: 'apply', state: moveRight(state) });
-      }
-      return;
-    }
-
-    if (key.ctrl && input === 'a') {
-      dispatch({ type: 'apply', state: { cursor: { index: 0, offset: 0 } } });
-      return;
-    }
-    if (key.ctrl && input === 'e') {
-      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 (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') {
-      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, 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')) {
-        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 } });
-          return;
-        }
-      }
-      const next = insertText(state, input);
-      dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
-    }
-  }, [disabled, exit, handleClipboardImagePaste, handleSubmit, navigateHistory, state]);
-
-  const handleOverlayInput = useCallback((input: string, key: InputKey) => {
-    if (disabled) 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
-    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')) {
-      void handleClipboardImagePaste('overlay');
-      return;
-    }
-
-    if (key.return && !key.shift) {
-      const serialized = serializeSegments(current.segments).trim();
-      if (serialized) {
-        const plainText = getPlainText(current.segments).trim();
-        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].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);
-        }
-        if (historyEnabled) {
-          current.history = [...current.history.slice(-100), serialized];
-        }
-      }
-      overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
-      renderOverlay(overlayStateRef.current);
-      return;
-    }
-
-    if (key.return && key.shift) {
-      overlayStateRef.current = { ...insertText(current, '\n'), historyIdx: -1 };
-      renderOverlay(overlayStateRef.current);
-      return;
-    }
-
-    if (key.upArrow || key.downArrow) {
-      const direction = key.upArrow ? 'up' : 'down';
-      if (historyEnabled && current.history.length > 0) {
-        let newIdx: number;
-        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 }
-          };
-        }
-        renderOverlay(overlayStateRef.current);
-      }
-      return;
-    }
-
-    if (key.leftArrow) {
-      if (key.ctrl) {
-        overlayStateRef.current = moveWordLeft(current);
-      } else {
-        overlayStateRef.current = moveLeft(current);
-      }
-      renderOverlay(overlayStateRef.current);
-      return;
-    }
-
-    if (key.rightArrow) {
-      if (key.ctrl) {
-        overlayStateRef.current = moveWordRight(current);
-      } else {
-        overlayStateRef.current = moveRight(current);
-      }
-      renderOverlay(overlayStateRef.current);
-      return;
-    }
-
-    if (key.ctrl && input === 'a') {
-      overlayStateRef.current = { ...current, cursor: { index: 0, offset: 0 } };
-      renderOverlay(overlayStateRef.current);
-      return;
-    }
-
-    if (key.ctrl && input === 'e') {
-      overlayStateRef.current = { ...current, cursor: { index: current.segments.length, offset: 0 } };
-      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 (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') {
-      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') {
-      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;
-    }
-
-    if (!key.ctrl && !key.meta && input) {
-      if (input.includes('\n')) {
-        const lineCount = input.split('\n').length;
-        if (lineCount >= PASTE_BADGE_THRESHOLD) {
-          overlayStateRef.current = insertBadge(current, { type: 'paste', text: input });
-        } else {
-          overlayStateRef.current = insertText(current, input);
-        }
-      } else {
-        overlayStateRef.current = insertText(current, input);
-      }
-      overlayStateRef.current = { ...overlayStateRef.current, historyIdx: -1 };
-      renderOverlay(overlayStateRef.current);
-    }
-  }, [disabled, historyEnabled, onCommand, onSubmit, renderOverlay]);
-
-  useInput((input, key) => {
-    if (overlayEnabled) {
-      handleOverlayInput(input, key);
-      return;
-    }
-    handleInput(input, key);
-  });
-
-  React.useEffect(() => {
-    if (!inputBus) return;
-    return inputBus.subscribe(({ input, key }) => {
-      if (overlayEnabled) {
-        handleOverlayInput(input, key);
-        return;
-      }
-      handleInput(input, key);
-    });
-  }, [handleInput, handleOverlayInput, inputBus, overlayEnabled]);
-
-  React.useEffect(() => {
-    if (!overlayEnabled) return;
-    renderOverlay(overlayStateRef.current);
-  }, [overlayEnabled, renderOverlay]);
-
-  const node = buildInputAreaView({
-    state,
-    placeholder,
-    disabled,
-    commands,
-    cols,
-    badgePreview,
-    showBadgePreview: true,
-    debug,
-    renderContent: !overlayEnabled
-  });
-
-  return <InkNode node={node} />;
-};
-
-export default InputArea;