minimal-agent 0.10.0 → 0.12.0

package/src/ui/InputBox.tsx

@@ -0,0 +1,567 @@
+/**
+ * ============================================================
+ *  src/ui/InputBox.tsx —— 用户输入框（v0.4 多行粘贴支持版）
+ * ------------------------------------------------------------
+ *  v0.4 新增功能：
+ *    - 多行粘贴支持：粘贴多行代码时完整保留所有行
+ *    - 多行编辑模式：Enter 提交，Alt+Enter（Mac: Option+Enter）插入换行
+ *    - 粘贴检测：自动识别长输入为粘贴操作
+ *    - 跨平台兼容：Win / Mac / Linux
+ *
+ *  v0.3 修复内容：
+ *    - 移除过激进的全局防抖机制（导致 Backspace 完全失效）
+ *    - 改为仅对 Delete 键做去重（解决 Windows 双事件问题）
+ *    - 修复 BufferView 组件重建导致的不可见问题
+ *    - 保留强制刷新但精准控制时机
+ * ============================================================
+ */
+
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+
+import { useTextBuffer } from './hooks/useTextBuffer.js';
+import { usePasteHandler } from './hooks/usePasteHandler.js';
+import { useInputHistory } from './hooks/useInputHistory.js';
+import { theme } from './theme.js';
+import { readClipboardImage } from '../utils/clipboardImage.js';
+
+// 剪贴板取图提示语的存活时长（毫秒）。提示只是反馈，不该长期占着一行。
+const CLIP_HINT_MS = 4000;
+
+/**
+ * 「这次按键是不是在要剪贴板里的图」——Ctrl+V 或 Alt+V。
+ *
+ * 为什么绑两个键：Windows Terminal 默认把 Ctrl+V 当成粘贴动作吃掉，而剪贴板里只有图片时
+ * 它什么都不发，程序**收不到任何事件**；Alt+V 没有默认绑定，能送达。macOS（Cmd+V 才是粘贴）
+ * 与 Linux（Ctrl+Shift+V 才是粘贴）上 Ctrl+V 则原样送达。
+ *
+ * 提出来单独导出是为了能被单测钉住：这是本文件里最危险的一行——一旦条件写宽到对**裸 v**
+ * 成立，用户每打一个字母 v 就会去起一个 PowerShell 子进程。Ink 对 `v` / `V` 给的是
+ * ctrl=false & meta=false，故必须同时要求恰好一个修饰键成立。
+ */
+export function isClipboardImageKey(input: string, key: { ctrl?: boolean; meta?: boolean }): boolean {
+  if (input !== 'v') return false;
+  return Boolean(key.ctrl) !== Boolean(key.meta);
+}
+
+// ============================================================
+//  IME 启发式（中文输入法防护）
+// ------------------------------------------------------------
+//  Ink 5.0.1 的 useInput（基于 readline）不暴露 composition event，
+//  无法原生支持 IME 状态机。本启发式做"最小可行"的兜底：
+//    1. 跟踪"短时间内连续插入"——IME 拼音→候选→提交过程中会产生
+//       一连串短间隔字符（pinyin 字母 + 单字 commit）
+//    2. 检测到 burst 后，**短时间窗口内**把 Enter 视为"IME 确认"
+//       而非"提交"（避免候选窗按 Enter 时把半截拼音+候选字提交）
+//    3. 不试图拦截或过滤 IME 字符——那是终端的活，拦了反而破坏
+//
+//  调参依据：微软拼音/搜狗拼音的 commit 节奏典型 < 100ms/char，
+//  而人手打英文 ≥ 200ms/char。500ms idle 视作 IME 结束。
+//
+//  注意：这是 best-effort，**不能 100% 解决 IME 问题**。
+//  终态方案是换掉 Ink 底层走 use-stdin 的 raw mode。
+// ============================================================
+const IME_BURST_GAP_MS = 200;   // 字符间隔 < 此值视作 IME 连续输入
+const IME_BURST_MIN_COUNT = 3;  // 连续 N 个字符才触发 IME 锁定
+const IME_LOCKOUT_MS = 500;     // 触发后禁 Enter 提交的窗口
+
+interface Props {
+  onSubmit: (input: string) => void;
+  disabled: boolean;
+  onAbort: () => void;
+  onClear: () => void;
+  onCompact: () => void;
+  onWorkspaces: () => void;
+}
+
+function InputBoxImpl({ onSubmit, disabled, onAbort, onClear, onCompact, onWorkspaces }: Props): JSX.Element {
+  const buf = useTextBuffer();
+  const hist = useInputHistory();
+  const ctrlCCountRef = useRef<number>(0);
+  const ctrlCTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const { exit } = useApp();
+
+  // 卸载清理：双击退出计数窗口的定时器（组件被 AskQuestion/ConfigMenu 顶替时）
+  useEffect(() => {
+    return () => {
+      if (ctrlCTimerRef.current) clearTimeout(ctrlCTimerRef.current);
+    };
+  }, []);
+
+  // 刷新触发器：值本身不读，只用 setter 触发 InputBoxImpl 重渲（→ BufferView 随父重渲）。
+  const [, setRefreshCounter] = useState(0);
+
+  // ✅ Ctrl+R 反向搜索模式（null 表示不在搜索）
+  const [searchMode, setSearchMode] =
+    useState<{ query: string; hit: string | null } | null>(null);
+
+  // ✅ Delete 专用去重：只防止 Windows 双事件，不影响其他键
+  const lastDeleteTime = useRef<number>(0);
+  const DELETE_DEBOUNCE_MS = 20; // 仅 Delete 键用极短防抖
+
+  // ✅ IME 启发式：跟踪字符插入节奏，检测 IME 草稿期间
+  //   imeBurstRef: { lastAt: 上次插入 ms, count: 当前 burst 内插入数, lastInsertEnd: 上次 IME 锁定结束 ms }
+  const imeBurstRef = useRef<{ lastAt: number; count: number; lockoutUntil: number }>({
+    lastAt: 0,
+    count: 0,
+    lockoutUntil: 0,
+  });
+  /** 把"刚插入了非空非控制字符"事件喂给 IME 检测器 */
+  const noteTextInsert = useCallback((textLen: number) => {
+    if (textLen <= 0) return;
+    const now = Date.now();
+    const s = imeBurstRef.current;
+    if (now - s.lastAt < IME_BURST_GAP_MS) {
+      s.count++;
+      if (s.count >= IME_BURST_MIN_COUNT) {
+        s.lockoutUntil = now + IME_LOCKOUT_MS;
+      }
+    } else {
+      s.count = 1;
+    }
+    s.lastAt = now;
+  }, []);
+
+  const forceRefresh = useCallback(() => {
+    setRefreshCounter((c) => c + 1);
+  }, []);
+
+  // ---- 剪贴板取图（Ctrl+V / Alt+V）----
+  // 终端不会把剪贴板里的图片字节送进 stdin，粘贴图片在终端里根本不产生输入事件，
+  // 所以必须由我们主动去问操作系统要（见 utils/clipboardImage.ts 头注）。
+  const [clipHint, setClipHint] = useState<string | null>(null);
+  const clipBusyRef = useRef(false);
+  const clipHintTimerRef = useRef<NodeJS.Timeout | null>(null);
+  useEffect(() => {
+    return () => {
+      if (clipHintTimerRef.current) clearTimeout(clipHintTimerRef.current);
+    };
+  }, []);
+
+  const showClipHint = useCallback((text: string, sticky = false) => {
+    setClipHint(text);
+    if (clipHintTimerRef.current) clearTimeout(clipHintTimerRef.current);
+    if (!sticky) {
+      clipHintTimerRef.current = setTimeout(() => setClipHint(null), CLIP_HINT_MS);
+    }
+  }, []);
+
+  const pasteImageFromClipboard = useCallback(() => {
+    if (clipBusyRef.current) return; // 连按不叠加子进程
+    clipBusyRef.current = true;
+    showClipHint('正在读取剪贴板…', true);
+    void readClipboardImage()
+      .then((res) => {
+        if (!res.ok) {
+          showClipHint(res.reason);
+          return;
+        }
+        // 恒用双引号包裹：@ 语法里只有 `[^"]+` 那条分支容得下空格和反斜杠
+        // （Windows 路径、含空格的文件名都靠它）。插进缓冲而不是维护隐形附件清单——
+        // 用户看得见附了什么、也能自己删掉。
+        buf.insert(`@"${res.path}" `);
+        forceRefresh();
+        showClipHint(res.fromFile ? `已附加剪贴板中的文件：${res.path}` : `已附加剪贴板截图：${res.path}`);
+      })
+      .catch((e) => showClipHint(`读取剪贴板失败：${(e as Error).message}`))
+      .finally(() => {
+        clipBusyRef.current = false;
+      });
+  }, [buf, forceRefresh, showClipHint]);
+
+  // ✅ 粘贴处理 Hook：支持多行粘贴
+  // v0.3 设计：Enter 始终发送, Alt+Enter（Mac: Option+Enter）换行, 粘贴期间拦截 Enter
+  const { handleInput: handlePasteInput } = usePasteHandler({
+    onPasteComplete: (text) => {
+      buf.insert(text);
+      forceRefresh();
+    },
+    multiline: true,
+  });
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'p') {
+      onWorkspaces();
+      return;
+    }
+    // ---- ✅ 粘贴检测（必须优先处理）----
+    // 这会在粘贴期间忽略 Enter 键，防止多行内容被截断
+    const pasteResult = handlePasteInput(input, key);
+    if (pasteResult === 'paste') {
+      // 粘贴内容已由 usePasteHandler 处理并插入
+      return;
+    }
+    if (pasteResult === 'enter-in-paste') {
+      // 粘贴期间的 Enter 键被忽略（不插入换行，不提交）
+      return;
+    }
+    if (pasteResult === 'enter-newline') {
+      // Alt+Enter：插入换行符（多行编辑用）
+      buf.insert('\n');
+      forceRefresh();
+      return;
+    }
+    // pasteResult === 'continue'，继续普通处理
+
+    // ---- ✅ Ctrl+R 反向搜索模式（独占按键流）----
+    if (searchMode !== null) {
+      // ESC 退出搜索
+      if (key.escape) {
+        setSearchMode(null);
+        return;
+      }
+      // Enter 选中并提交
+      if (key.return) {
+        if (searchMode.hit !== null) {
+          const text = searchMode.hit;
+          setSearchMode(null);
+          buf.clear();
+          forceRefresh();
+          hist.push(text);
+          hist.resetCursor();
+          onSubmit(text);
+        } else {
+          setSearchMode(null);
+        }
+        return;
+      }
+      // Backspace 削 query；query 削空了退出
+      if (key.backspace || key.delete) {
+        const nextQuery = searchMode.query.slice(0, -1);
+        if (nextQuery.length === 0) {
+          setSearchMode(null);
+          return;
+        }
+        const nextHit = hist.search(nextQuery)[0] ?? null;
+        setSearchMode({ query: nextQuery, hit: nextHit });
+        return;
+      }
+      // Ctrl+C 退出搜索（不退出程序）
+      if (key.ctrl && input === 'c') {
+        setSearchMode(null);
+        return;
+      }
+      // 字面字符（排除控制键）追加到 query
+      if (input && !key.ctrl && !key.meta && !key.return && !key.escape) {
+        const nextQuery = searchMode.query + input;
+        const nextHit = hist.search(nextQuery)[0] ?? null;
+        setSearchMode({ query: nextQuery, hit: nextHit });
+        return;
+      }
+      // 其他按键在搜索模式下静默吞掉
+      return;
+    }
+
+    // ---- ESC ----
+    if (key.escape) {
+      if (disabled) {
+        // try/catch 防 onAbort 异常冒泡到 Ink 渲染层（abort handler 多在 useChat 里，
+        // 内部若 throw 会黑屏；吞掉仅 stderr 注记）
+        try { onAbort(); } catch (e) { console.error('[InputBox] onAbort threw:', e); }
+      }
+      return;
+    }
+
+    // ---- 剪贴板取图：Ctrl+V / Alt+V（判据见 isClipboardImageKey）----
+    // 必须写在下方 `if (key.ctrl && !key.meta)` 那个 switch **之前**——取图是异步的，
+    // 那个 switch 结尾是同步 forceRefresh()，落进去会被当成"未知控制键"直接吞掉。
+    if (isClipboardImageKey(input, key)) {
+      pasteImageFromClipboard();
+      return;
+    }
+
+    // ---- ✅ Ctrl+R 进入反向搜索（仅在空 buf）----
+    if (key.ctrl && input === 'r') {
+      if (buf.state.text.length === 0) {
+        setSearchMode({ query: '', hit: null });
+      }
+      return;
+    }
+
+    // ---- Ctrl+C ----
+    if (key.ctrl && input === 'c') {
+      if (buf.state.text.length > 0) {
+        buf.clear();
+        forceRefresh();
+        return;
+      }
+      if (disabled) {
+        // 同 ESC 路径，try/catch 防 onAbort 异常冒泡到 Ink 渲染层
+        try { onAbort(); } catch (e) { console.error('[InputBox] onAbort threw:', e); }
+        // 强制退出安全阀（2026-07-02「Ctrl+C 退不出来」事故）：abort 收尾慢
+        // （长时子进程/网络挂起）时用户不能被困在程序里——1s 窗口内再按一次
+        // Ctrl+C 直接退出（复用下方双击退出的计数/窗口；工作流现场已由状态目录
+        // 持久化 halt 语义，强退不丢进度、可 resume）。ESC 保持只 abort 不退出。
+        ctrlCCountRef.current++;
+        if (ctrlCCountRef.current >= 2) exit();
+        if (ctrlCTimerRef.current) clearTimeout(ctrlCTimerRef.current);
+        ctrlCTimerRef.current = setTimeout(() => { ctrlCCountRef.current = 0; }, 1000);
+        return;
+      }
+      ctrlCCountRef.current++;
+      if (ctrlCCountRef.current >= 2) exit();
+      if (ctrlCTimerRef.current) clearTimeout(ctrlCTimerRef.current);
+      ctrlCTimerRef.current = setTimeout(() => { ctrlCCountRef.current = 0; }, 1000);
+      return;
+    }
+
+    // ---- ✅ Enter 提交（始终发送）----
+    // usePasteHandler v0.3 逻辑：
+    //   - Enter（单独按）：返回 'continue' → 这里执行**发送**
+    //   - Alt+Enter（Mac: Option+Enter）：返回 'enter-newline' → 上面已处理为**插入换行**
+    //   - Ctrl+Enter：返回 'continue' → 这里也执行**强制发送**
+    //   - 粘贴期间 + Enter：返回 'enter-in-paste' → **忽略**（防误发）
+    //   - IME 草稿期间 + Enter：视为 IME 确认而非提交（启发式，见 IME_BURST_* 常量）
+    if (key.return) {
+      const now = Date.now();
+      if (now < imeBurstRef.current.lockoutUntil) {
+        // IME 候选窗按 Enter → 走换行而非提交（pinyin 候选确认不打断草稿）
+        buf.insert('\n');
+        forceRefresh();
+        return;
+      }
+      const text = buf.state.text.trim();
+      if (text.length === 0) return;
+      if (text === '/paste-image') {
+        buf.clear();
+        forceRefresh();
+        pasteImageFromClipboard();
+        return;
+      }
+      // 入历史（所有非空提交都记，包括 slash 命令；连续重复 hist 内部去重）
+      hist.push(text);
+      hist.resetCursor();
+      if (text === '/exit' || text === '/quit') exit();
+      else if (text === '/new' || text === '/clear') { buf.clear(); forceRefresh(); onClear(); }
+      else if (text === '/compact') { buf.clear(); forceRefresh(); onCompact(); }
+      else { buf.clear(); forceRefresh(); onSubmit(text); }
+      return;
+    }
+
+    // ---- 移动光标（无防抖，响应优先）----
+    if (key.leftArrow) {
+      if (key.ctrl || key.meta) buf.moveWordLeft();
+      else buf.moveLeft();
+      forceRefresh();
+      return;
+    }
+    if (key.rightArrow) {
+      if (key.ctrl || key.meta) buf.moveWordRight();
+      else buf.moveRight();
+      forceRefresh();
+      return;
+    }
+    if (key.upArrow) {
+      // 首行按 ↑ → 翻历史；中间行 → 正常移动光标
+      if (buf.layout.cursorRow === 0) {
+        const prev = hist.prev();
+        if (prev !== null) {
+          buf.setText(prev);
+          forceRefresh();
+        }
+        return;
+      }
+      buf.moveUp();
+      forceRefresh();
+      return;
+    }
+    if (key.downArrow) {
+      // 末行按 ↓ → 翻历史；中间行 → 正常移动光标
+      const lastRow = buf.layout.lines.length - 1;
+      if (buf.layout.cursorRow >= lastRow) {
+        const nxt = hist.next();
+        // next 返 null 表示走到 "新输入" 位 → 清空缓冲
+        buf.setText(nxt ?? '');
+        forceRefresh();
+        return;
+      }
+      buf.moveDown();
+      forceRefresh();
+      return;
+    }
+
+    // ---- ✅ Backspace（无防抖，保证每次按键都生效）----
+    if (key.backspace) {
+      buf.deleteBefore();
+      forceRefresh();
+      return;
+    }
+
+    // ---- ✅ Delete（仅此键有防抖，解决 Windows 双事件）----
+    if (key.delete) {
+      const now = Date.now();
+      if (now - lastDeleteTime.current < DELETE_DEBOUNCE_MS) {
+        return; // 忽略过快的重复 Delete（Windows 特有问题）
+      }
+      lastDeleteTime.current = now;
+
+      // Windows 下 key.delete 通常对应 Backspace，保持与原始行为一致
+      buf.deleteBefore();
+      forceRefresh();
+      return;
+    }
+
+    // ---- Emacs 控制键（无防抖）----
+    if (key.ctrl && !key.meta) {
+      switch (input) {
+        case 'a': buf.moveLineStart(); break;
+        case 'e': buf.moveLineEnd(); break;
+        case 'b': buf.moveLeft(); break;
+        case 'f': buf.moveRight(); break;
+        case 'u': buf.killToLineStart(); break;
+        case 'k': buf.killToLineEnd(); break;
+        case 'w': buf.deleteWordBefore(); break;
+        case 'h': buf.deleteBefore(); break; // Ctrl+H = Backspace
+        default: return; // 忽略其他控制键
+      }
+      forceRefresh();
+      return;
+    }
+
+    // ---- Alt 快捷键 ----
+    if (key.meta && input === '<') { buf.moveBufferStart(); forceRefresh(); return; }
+    if (key.meta && input === '>') { buf.moveBufferEnd(); forceRefresh(); return; }
+
+    // ---- ✅ 字符输入（已排除粘贴，已排除裸 Enter）----
+    // Alt+Enter 在多数终端发 \x1b\r：Ink 把 \x1b 剥掉后 input='\r'、key.return=false、
+    // key.meta=false，从这里落地。把 \r/\r\n 统一成 \n，textBuffer 才能真切分逻辑行
+    // （否则 layout 永远 1 行 → ↑/↓ 失效、输入框不长高，光标只能左右）。
+    if (input && !key.meta) {
+      const normalized = input.replace(/\r\n?/g, '\n');
+      noteTextInsert(normalized.length);
+      buf.insert(normalized);
+      forceRefresh();
+    }
+  });
+
+  // ✅ 搜索模式下覆盖整个 BufferView，显示 (reverse-i-search)`<query>': <hit>
+  if (searchMode !== null) {
+    return <ReverseSearchView query={searchMode.query} hit={searchMode.hit} />;
+  }
+
+  // BufferView 非 memo：InputBoxImpl 因按键 setState（useTextBuffer 的 buf state
+  // 或 refreshCounter 任一变化）重渲时，BufferView 作为子组件随之重渲、重读 buf.layout。
+  // 故无需把刷新计数透传给它（透传是冗余的）。
+  // clipHint 只在剪贴板取图前后短暂占一行（CLIP_HINT_MS 后自动消失），不常驻。
+  return (
+    <Box flexDirection="column">
+      <BufferView buf={buf} disabled={disabled} />
+      {clipHint !== null && (
+        <Text color={theme.subtle} dimColor>
+          {clipHint}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * v2.x 修复：用 React.memo 包装 InputBox。
+ *
+ * 根因：App.tsx 之前用 deps=[chat] 包 handleClear / handleSubmit；chat 每次
+ * useChat 重渲都是新对象引用（流式期 reasoningPreview/streamingText 每 100ms flush，
+ * ~10 Hz）→ handleClear / handleSubmit 引用频繁变 → InputBox 收到新 onClear / onSubmit
+ * → 不 memo 时强制重渲 → Ink 收到 InputBox 子树输出变化 → 整个 live 区被重写 →
+ * 看起来 spinner 每帧打新行。
+ *
+ * App.tsx deps 已改为精细字段（chat.clearHistory / chat.submit 等），引用稳定；
+ * 配合此处 React.memo，InputBox 在 onSubmit / onAbort / onClear / onCompact /
+ * disabled 真正变化时才重渲。
+ */
+export const InputBox = React.memo(InputBoxImpl);
+
+// ---------- 反向搜索视图 ----------
+
+function ReverseSearchView({
+  query,
+  hit,
+}: {
+  query: string;
+  hit: string | null;
+}): JSX.Element {
+  // hit 可能含换行；仅展示首行避免撑爆 InputBox
+  const hitFirstLine = hit !== null ? hit.split('\n', 1)[0] : null;
+  const hitDisplay =
+    hitFirstLine === null
+      ? '<no match>'
+      : hit !== null && hit.includes('\n')
+        ? `${hitFirstLine} …`
+        : hitFirstLine;
+  return (
+    <Box borderStyle="round" borderColor="magenta" paddingX={1} flexDirection="column">
+      <Box>
+        <Text color={theme.plugin} bold>
+          {'(reverse-i-search)`'}
+        </Text>
+        <Text color={theme.warning}>{query}</Text>
+        <Text color={theme.plugin} bold>{"': "}</Text>
+        <Text color={hitFirstLine === null ? theme.subtle : 'white'}>{hitDisplay}</Text>
+      </Box>
+      <Box>
+        <Text color={theme.subtle} dimColor>
+          Enter 提交 · ESC 取消 · Backspace 删字符
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+// ---------- 渲染组件（稳定版本）----------
+
+interface BufferViewProps {
+  buf: ReturnType<typeof useTextBuffer>;
+  disabled: boolean;
+}
+
+function BufferView({ buf, disabled }: BufferViewProps): JSX.Element {
+  // buf.layout 由 useTextBuffer 的 useMemo([state]) 维护：父组件每次重渲传入的 buf
+  // 都已带最新 layout，这里直接读即可（BufferView 故意不 memo，随父重渲）。
+  const { lines, cursorRow, cursorCol } = buf.layout;
+
+  const promptColor = disabled ? theme.warning : theme.user;
+  const prompt = disabled ? '📝 ' : '> ';
+  const hasContent = lines.some(l => l.length > 0);
+
+  return (
+    <Box borderStyle="round" borderColor={promptColor} paddingX={1} flexDirection="column">
+      {lines.map((line, row) => {
+        const isFirst = row === 0;
+        const isCursorRow = row === cursorRow;
+
+        // key 只用 row：保持稳定，避免逐行重建（layout 变化由父级重渲带下来）
+        return (
+          <Box key={row}>
+            <Text color={promptColor} bold>
+              {isFirst ? prompt : '  '}
+            </Text>
+            {isCursorRow ? (
+              <CursorLine line={line} col={cursorCol} />
+            ) : disabled && isFirst && !hasContent ? (
+              /* 执行中占位提示：告知可继续输入插话 */
+              <Text color={theme.subtle} dimColor>
+                AI 工作中，可继续输入补充消息（Ctrl+C 中断，双击 Ctrl+C 强制退出）
+              </Text>
+            ) : (
+              <Text>{line || ' '}</Text>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/** 光标行渲染（稳定，不会被重建） */
+function CursorLine({ line, col }: { line: string; col: number }): JSX.Element {
+  const cps = Array.from(line);
+  const before = cps.slice(0, col).join('');
+  const cursorChar = cps[col] ?? ' ';
+  const after = cps.slice(col + 1).join('');
+  return (
+    <Text>
+      {before}
+      <Text inverse>{cursorChar}</Text>
+      {after}
+    </Text>
+  );
+}