minimal-agent 0.10.0 → 0.12.0

package/src/ui/AskQuestion.tsx

@@ -0,0 +1,300 @@
+/**
+ * ============================================================
+ *  src/ui/AskQuestion.tsx —— AskUserQuestion 工具的 TUI 问答界面
+ * ------------------------------------------------------------
+ *  这是 AskUserQuestion 工具向用户提问时弹出的选择题界面。由 askBridge 的
+ *  AskHandler（在 useChat mount 时通过 setAskHandler 注册）触发：handler 把
+ *  问题数组存进 pendingAsk state，App 看到 pendingAsk 存在便渲染本组件，
+ *  并让它**独占输入焦点**（屏蔽 InputBox），用户答完后 handler 的 Promise
+ *  以 AskAnswer[] resolve、继续工具回路；ESC/Ctrl+C 取消则 reject。
+ *
+ *  逐题进行：从第 0 题问到最后一题，每题答完推进，末题答完一次性回调 onAnswer。
+ *  每题选项列表末尾自动追加一个「✏️ 其他（自由输入）」伪选项，命中即切到文本
+ *  输入子模式，让用户填选项之外的答案（自由输入按单值处理，覆盖多选集合）。
+ *
+ *  Ink 用法与风格对齐 cli/wizards/providerWizard.tsx：useInput 手写键位、↑↓ 取模移动
+ *  高亮、`> ` 前缀 + cyan 高亮、gray 操作提示、文本输入用累积 draft + backspace。
+ * ============================================================
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+import type { AskAnswer, AskOption, AskQuestionSpec, AskSource } from '../askBridge.js';
+import { theme } from './theme.js';
+
+interface AskQuestionProps {
+  questions: AskQuestionSpec[];
+  /** 提问来源；kind:'subagent' 时在问题上方显示「子任务：X」徽标。缺省=主循环提问，不显徽标。 */
+  source?: AskSource | null;
+  queuedCount?: number;
+  /** 全部问题答完后调用一次 */
+  onAnswer: (answers: AskAnswer[]) => void;
+  /** ESC / Ctrl+C 取消当前来源；子任务问题不会中断其他并行任务 */
+  onCancel: () => void;
+}
+
+/** description 过长截断到此长度，防止 live 区被超长文本撑爆。 */
+const DESC_MAX = 80;
+
+/**
+ * 提问上限——与 system prompt 里的"最多 4 题"硬性对齐。超出会：
+ *   - UI 截断到 4 题（仅前 4 题可答，后面的被静默丢弃）
+ *   - stderr 注记，提示上游（callers 应在调 AskUserQuestion 工具前自检）
+ * 这是防御层——理想情况是 tool 上游 Zod 校验就拦住。
+ */
+const MAX_QUESTIONS = 4;
+
+function clampDesc(s: string): string {
+  return s.length > DESC_MAX ? `${s.slice(0, DESC_MAX - 1)}…` : s;
+}
+
+export function AskQuestion({
+  questions,
+  source,
+  queuedCount = 0,
+  onAnswer,
+  onCancel,
+}: AskQuestionProps): JSX.Element {
+  // 硬限 4 题；超量截断。注记走 useEffect（只发一次）：渲染期写 stderr 会随
+  // 每次按键重渲重复打行，且 Ink 渲染期间写 stdout/stderr 会撕裂终端画面。
+  const effectiveQuestions = useMemo(
+    () => questions.slice(0, MAX_QUESTIONS),
+    [questions],
+  );
+  useEffect(() => {
+    if (questions.length <= MAX_QUESTIONS) return;
+    try {
+      process.stderr.write(
+        `[AskUserQuestion] 收到 ${questions.length} 题超过上限 ${MAX_QUESTIONS}，已截断\n`,
+      );
+    } catch { /* ignore */ }
+  }, [questions]);
+  // 当前进行到第几题
+  const [questionIndex, setQuestionIndex] = useState(0);
+  // 当前题高亮的选项下标（含末尾「其他」伪选项）
+  const [idx, setIdx] = useState(0);
+  // 多选时已选中的真实 option 下标集合
+  const [picked, setPicked] = useState<Set<number>>(new Set());
+  // 已累积的答案
+  const [answers, setAnswers] = useState<AskAnswer[]>([]);
+  // 是否处于「其他（自由输入）」文本子模式
+  const [textMode, setTextMode] = useState(false);
+  // 文本子模式的累积草稿
+  const [draft, setDraft] = useState('');
+
+  const current: AskQuestionSpec | undefined = effectiveQuestions[questionIndex];
+  const multi = current?.multiSelect === true;
+  const options: AskOption[] = current?.options ?? [];
+  // 末尾「其他」伪选项占据下标 options.length，故列表总长 = options.length + 1
+  const otherIndex = options.length;
+  const listLength = options.length + 1;
+
+  /** 切到下一题，重置所有逐题状态；若已是末题则一次性回调 onAnswer。 */
+  function advance(answer: AskAnswer) {
+    const nextAnswers = [...answers, answer];
+    const nextQ = questionIndex + 1;
+    if (nextQ >= effectiveQuestions.length) {
+      onAnswer(nextAnswers);
+      return;
+    }
+    setAnswers(nextAnswers);
+    setQuestionIndex(nextQ);
+    setIdx(0);
+    setPicked(new Set());
+    setTextMode(false);
+    setDraft('');
+  }
+
+  useInput((input, key) => {
+    // 没有当前题（理论不会发生）→ 直接当作取消
+    if (!current) {
+      onCancel();
+      return;
+    }
+
+    // ---- 文本子模式：自由输入 ----
+    if (textMode) {
+      if (key.escape) {
+        // 退回选项列表（不取消整轮）
+        setTextMode(false);
+        setDraft('');
+        return;
+      }
+      if (key.return) {
+        const text = draft.trim();
+        if (text.length === 0) return;
+        // 自由输入按单值处理，覆盖多选集合
+        advance({
+          header: current.header,
+          question: current.question,
+          selected: [text],
+        });
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setDraft((s) => s.slice(0, -1));
+        return;
+      }
+      if (input && !key.meta && !key.ctrl) {
+        setDraft((s) => s + input);
+      }
+      return;
+    }
+
+    // ---- 选项列表模式 ----
+    if (key.escape || (key.ctrl && input === 'c')) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setIdx((i) => (i - 1 + listLength) % listLength);
+      return;
+    }
+    if (key.downArrow) {
+      setIdx((i) => (i + 1) % listLength);
+      return;
+    }
+
+    // 高亮落在「其他」伪选项：Enter（单选/多选都）进入文本子模式
+    const onOther = idx === otherIndex;
+
+    if (multi) {
+      // 多选：空格 toggle；Enter 确认本题
+      if (input === ' ') {
+        if (onOther) {
+          // 「其他」上按空格 → 进入自由输入
+          setTextMode(true);
+          setDraft('');
+          return;
+        }
+        setPicked((prev) => {
+          const next = new Set(prev);
+          if (next.has(idx)) next.delete(idx);
+          else next.add(idx);
+          return next;
+        });
+        return;
+      }
+      if (key.return) {
+        if (onOther) {
+          setTextMode(true);
+          setDraft('');
+          return;
+        }
+        const selected = options
+          .map((o, i) => (picked.has(i) ? o.label : null))
+          .filter((l): l is string => l !== null);
+        advance({
+          header: current.header,
+          question: current.question,
+          selected,
+        });
+        return;
+      }
+      return;
+    }
+
+    // 单选：Enter 选中当前高亮项
+    if (key.return) {
+      if (onOther) {
+        setTextMode(true);
+        setDraft('');
+        return;
+      }
+      const opt = options[idx];
+      if (!opt) return;
+      advance({
+        header: current.header,
+        question: current.question,
+        selected: [opt.label],
+      });
+    }
+  });
+
+  // 无题可问（空数组）→ 渲染占位（useInput 已处理取消，这里只防御渲染崩）
+  if (!current) {
+    return (
+      <Box paddingX={1}>
+        <Text color={theme.subtle}>（无问题）</Text>
+      </Box>
+    );
+  }
+
+  const progress = `提问 (${questionIndex + 1}/${effectiveQuestions.length}) · ${current.header}`;
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {source?.kind === 'subagent' && (
+        <Box marginBottom={1}>
+          <Text color={theme.subtle} dimColor>
+            {`⚡ 子任务：${source.description ?? '执行任务'}（其他子任务继续运行中）`}
+          </Text>
+        </Box>
+      )}
+      {queuedCount > 0 && (
+        <Box marginBottom={1}>
+          <Text color={theme.subtle} dimColor>{`另有 ${queuedCount} 个问题排队`}</Text>
+        </Box>
+      )}
+
+      <Box marginBottom={1}>
+        <Text color={theme.user} bold>
+          {progress}
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text>{current.question}</Text>
+      </Box>
+
+      {textMode ? (
+        <Box flexDirection="column">
+          <Text color={theme.subtle}>✏️ 自由输入：</Text>
+          <Box marginTop={1} borderStyle="round" borderColor="cyan" paddingX={1}>
+            <Text>{draft || ' '}</Text>
+          </Box>
+          <Text color={theme.subtle}>输入后 Enter 提交 · ESC 返回</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {options.map((opt, i) => {
+            const active = i === idx;
+            const box = multi ? (picked.has(i) ? '[x] ' : '[ ] ') : '';
+            return (
+              <Box key={`${i}-${opt.label}`} flexDirection="column">
+                <Text color={active ? theme.user : undefined}>
+                  {active ? '> ' : '  '}
+                  {box}
+                  {opt.label}
+                </Text>
+                {opt.description ? (
+                  <Text color={theme.subtle}>
+                    {'      '}
+                    {clampDesc(opt.description)}
+                  </Text>
+                ) : null}
+              </Box>
+            );
+          })}
+
+          {/* 末尾「其他（自由输入）」伪选项 */}
+          <Text color={idx === otherIndex ? theme.user : undefined}>
+            {idx === otherIndex ? '> ' : '  '}
+            {multi ? '    ' : ''}
+            ✏️ 其他（自由输入）
+          </Text>
+
+          <Box marginTop={1}>
+            <Text color={theme.subtle}>
+              {multi
+                ? '↑↓ 移动 · 空格 多选 · Enter 确认本题 · ESC 取消'
+                : '↑↓ 选择 · Enter 确认 · ESC 取消'}
+            </Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/ui/InputBox.js

@@ -22,6 +22,25 @@ 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, key) {
+    if (input !== 'v')
+        return false;
+    return Boolean(key.ctrl) !== Boolean(key.meta);
+}
 // ============================================================
 //  IME 启发式（中文输入法防护）
 // ------------------------------------------------------------
@@ -89,6 +108,49 @@ function InputBoxImpl({ onSubmit, disabled, onAbort, onClear, onCompact, onWorks
     const forceRefresh = useCallback(() => {
         setRefreshCounter((c) => c + 1);
     }, []);
+    // ---- 剪贴板取图（Ctrl+V / Alt+V）----
+    // 终端不会把剪贴板里的图片字节送进 stdin，粘贴图片在终端里根本不产生输入事件，
+    // 所以必须由我们主动去问操作系统要（见 utils/clipboardImage.ts 头注）。
+    const [clipHint, setClipHint] = useState(null);
+    const clipBusyRef = useRef(false);
+    const clipHintTimerRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (clipHintTimerRef.current)
+                clearTimeout(clipHintTimerRef.current);
+        };
+    }, []);
+    const showClipHint = useCallback((text, 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.message}`))
+            .finally(() => {
+            clipBusyRef.current = false;
+        });
+    }, [buf, forceRefresh, showClipHint]);
     // ✅ 粘贴处理 Hook：支持多行粘贴
     // v0.3 设计：Enter 始终发送, Alt+Enter（Mac: Option+Enter）换行, 粘贴期间拦截 Enter
     const { handleInput: handlePasteInput } = usePasteHandler({
@@ -184,6 +246,13 @@ function InputBoxImpl({ onSubmit, disabled, onAbort, onClear, onCompact, onWorks
             }
             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) {
@@ -244,6 +313,12 @@ function InputBoxImpl({ onSubmit, disabled, onAbort, onClear, onCompact, onWorks
             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();
@@ -390,7 +465,8 @@ function InputBoxImpl({ onSubmit, disabled, onAbort, onClear, onCompact, onWorks
     // BufferView 非 memo：InputBoxImpl 因按键 setState（useTextBuffer 的 buf state
     // 或 refreshCounter 任一变化）重渲时，BufferView 作为子组件随之重渲、重读 buf.layout。
     // 故无需把刷新计数透传给它（透传是冗余的）。
-    return _jsx(BufferView, { buf: buf, disabled: disabled });
+    // clipHint 只在剪贴板取图前后短暂占一行（CLIP_HINT_MS 后自动消失），不常驻。
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(BufferView, { buf: buf, disabled: disabled }), clipHint !== null && (_jsx(Text, { color: theme.subtle, dimColor: true, children: clipHint }))] }));
 }
 /**
  * v2.x 修复：用 React.memo 包装 InputBox。