@zhushanwen/pi-ask-user 0.0.3 → 0.1.0

package/src/question-view.ts

@@ -2,6 +2,7 @@
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@mariozechner/pi-tui";
 
 import {
+	isHighSurrogate,
 	OTHER_LABEL,
 	type Question,
 	type QuestionState,
@@ -9,9 +10,16 @@ import {
 	SPLIT_PANE_MIN_WIDTH,
 	SPLIT_PANE_RIGHT_MIN,
 	SPLIT_PANE_SEPARATOR,
+	SURROGATE_PAIR_LEN,
 	type ThemeLike,
 } from "./types";
 
+const SPLIT_PANE_LEFT_RATIO = 0.42;
+const DESCRIPTION_INDENT_MULTI = 10;
+const DESCRIPTION_INDENT_SINGLE = 8;
+const PREVIEW_MIN_WIDTH = 10;
+const QUESTION_TEXT_MARGIN = 2;
+
 export interface DisplayOption {
 	label: string;
 	description?: string;
@@ -21,6 +29,21 @@ export interface DisplayOption {
 /** Other 自由输入 / 已保存预览的软换行行数上限。超出则截断并加省略号。 */
 const MAX_EDITOR_LINES = 5;
 
+/**
+ * 渲染编辑器文本，光标位置用反色高亮（ANSI SGR 7/27），不占额外列。
+ * surrogate pair 安全：光标在高代理前时反色高亮整个 code point（2 个 code unit），
+ * 与光标移动/Backspace 的跳过逻辑对称，避免拆散 emoji 导致终端显示替换字符。
+ * 光标在文本末尾（超出范围）时反色高亮一个空格占位。
+ */
+function renderCursorText(text: string, cursorPos: number): string {
+	const before = text.slice(0, cursorPos);
+	// 光标在高代理前 → 反色高亮整个 surrogate pair
+	const charLen = isHighSurrogate(text, cursorPos) ? SURROGATE_PAIR_LEN : 1;
+	const charAtCursor = text.slice(cursorPos, cursorPos + charLen) || " ";
+	const after = text.slice(cursorPos + charLen);
+	return `${before}\x1b[7m${charAtCursor}\x1b[27m${after}`;
+}
+
 /**
  * 把一段带样式的文本按 availWidth 软换行输出为多行，最多 maxLines 行。
  * - 首行前缀 lead（如 "> [ ] "），后续行用等宽空格缩进到 input 起始列对齐。
@@ -29,7 +52,7 @@ const MAX_EDITOR_LINES = 5;
  *
  * @param push      输出回调（通常为带 truncateToWidth 的 add，提供安全兜底）
  * @param lead      首行前缀（含选中标记 / 勾选框）
- * @param content   待换行展示的已样式化文本（可含 ANSI + 末尾光标 █），为空则只输出 lead
+ * @param content   待换行展示的已样式化文本（可含 ANSI + 末尾反色光标），为空则只输出 lead
  * @param availWidth 单行可用宽度
  * @param maxLines  最多行数
  */
@@ -71,7 +94,7 @@ export function getSplitPaneWidths(width: number): { left: number; right: number
 	if (width < SPLIT_PANE_MIN_WIDTH) return null;
 	const available = width - SPLIT_PANE_SEPARATOR.length;
 	if (available < SPLIT_PANE_LEFT_MIN + SPLIT_PANE_RIGHT_MIN) return null;
-	const preferredLeft = Math.floor(available * 0.42);
+	const preferredLeft = Math.floor(available * SPLIT_PANE_LEFT_RATIO);
 	const left = Math.max(
 		SPLIT_PANE_LEFT_MIN,
 		Math.min(preferredLeft, available - SPLIT_PANE_RIGHT_MIN),
@@ -81,8 +104,12 @@ export function getSplitPaneWidths(width: number): { left: number; right: number
 	return { left, right };
 }
 
+/** 编辑器底部操作提示：随实现能力更新（实现偏差 D-005 已支持光标移动）。
+ *  反色光标占位已暗示可输入，故突出新增的方向键/移动能力。 */
+const EDITOR_HINT = " ←/→ Home/End move · Backspace deletes · Enter submit · Esc back";
+
 /** 构建选项列表行（不含分屏预览）。hideDescriptions 用于分屏模式左列。
- *  freeform 模式下，Other 行**原地**变 [ ] <input>█（多选）/ <input>█（单选），
+ *  freeform 模式下，Other 行**原地**变 [ ] <input> 反色光标（多选）/ <input> 反色光标（单选），
  *  不再依赖 buildEditorBlock 的下方独立编辑块。 */
 function buildOptionLines(
 	q: Question,
@@ -90,7 +117,7 @@ function buildOptionLines(
 	theme: ThemeLike,
 	width: number,
 	hideDescriptions: boolean,
-	editorText: string = "",
+	draftText: string = "",
 ): string[] {
 	const t = theme;
 	const opts = allOptions(q);
@@ -101,30 +128,41 @@ function buildOptionLines(
 
 	for (let i = 0; i < opts.length; i++) {
 		const opt = opts[i]!;
-		const isSelected = i === state.cursorIndex;
+		// 编辑器模式下用 savedOptionsCursorIndex 判断选项高亮，cursorIndex 此时是文本光标
+		const activeOptionCursor = (state.mode === "freeform" || state.mode === "comment") ? state.savedOptionsCursorIndex : state.cursorIndex;
+		const isSelected = i === activeOptionCursor;
 		const isOther = opt.isOther === true;
 		const prefix = isSelected ? t.fg("accent", ">") : " ";
 
 		if (isOther) {
+			// 标记位宽度必须与普通选项一致，否则编号列错位：
+			//   单选 check = 1 列，多选 box = 3 列。
+			//   此前单选 freeform 占位用 "  "(2列)、多选非 freeform 用 check(1列)，
+			//   两种情况下 Other 编号都与普通选项错位。
 			if (state.mode === "freeform") {
-				// 原地编辑：与普通选项的 [ ] 框视觉对齐（单选无勾选语义则留空）。
-				// lead = "> [ ] "，编号 + 输入文本跟在框后，内容起始列与普通选项一致。
-				const box = q.multiSelect ? t.fg("dim", "[ ]") : "  ";
+				const marker = q.multiSelect ? t.fg("dim", "[ ]") : " ";
 				const num = i + 1;
-				const lead = `${prefix} ${box} `;
+				const lead = `${prefix} ${marker} `;
 				const avail = Math.max(1, width - visibleWidth(lead));
-				// 编号 + 文本 + 末尾光标 █ 整体软换行（空 input 时仅编号 + 光标，wrapTextWithAnsi 单行）
-				const styled = `${t.fg("muted", `${num}. `)}${t.fg("text", editorText)}${t.fg("accent", "█")}`;
+				// 编号 + 文本，光标用反色高亮当前字符（surrogate pair 安全，不占额外位置）
+				const cursorText = renderCursorText(draftText, state.cursorIndex);
+				const styled = `${t.fg("muted", `${num}. `)}${t.fg("text", cursorText)}`;
 				addWrappedInput(add, lead, styled, avail, MAX_EDITOR_LINES);
 			} else {
 				const hasFreeText = state.freeTextValue !== null;
-				const check = hasFreeText ? t.fg("success", "✓") : " ";
-				const labelColor = isSelected ? "accent" : "muted";
+				const marker = q.multiSelect
+					? (hasFreeText ? t.fg("success", "[✓]") : t.fg("dim", "[ ]"))
+					: (hasFreeText ? t.fg("success", "✓") : " ");
+				const labelColor = isSelected ? "accent" : "text";
 				const num = i + 1;
-				add(`${prefix} ${check} ${t.fg(labelColor, `${num}. ${opt.label}`)}`);
+				add(`${prefix} ${marker} ${t.fg(labelColor, `${num}. ${opt.label}`)}`);
 				if (hasFreeText) {
-					// 已保存 freeText 预览：软换行展示，最多 MAX_EDITOR_LINES 行（不再单行截断）
-					const lead = "      "; // 6 列缩进，与上方 label 行对齐（prefix1 + sp1 + check1 + sp1 + num2 = 6）
+					// 预览缩进对齐到 label 起始列：prefix + sp + marker + sp + "N." + sp。
+					// 随 num 位数与单/多选 marker 宽度动态变化，硬编码会错位。
+					const numStr = `${num}.`;
+					const lead = " ".repeat(
+						visibleWidth(prefix) + 1 + visibleWidth(marker) + 1 + numStr.length + 1,
+					);
 					const avail = Math.max(1, width - visibleWidth(lead));
 					const styled = t.fg("dim", `"${state.freeTextValue ?? ""}"`);
 					addWrappedInput(add, lead, styled, avail, MAX_EDITOR_LINES);
@@ -137,7 +175,7 @@ function buildOptionLines(
 			const num = i + 1;
 			add(`${prefix} ${box} ${t.fg(labelColor, `${num}. ${opt.label}`)}`);
 			if (opt.description && !hideDescriptions) {
-				const wrapped = wrapTextWithAnsi(t.fg("muted", opt.description), width - 10);
+				const wrapped = wrapTextWithAnsi(t.fg("muted", opt.description), width - DESCRIPTION_INDENT_MULTI);
 				for (const line of wrapped) add(`          ${line}`);
 			}
 		} else {
@@ -147,7 +185,7 @@ function buildOptionLines(
 			const num = i + 1;
 			add(`${prefix} ${check} ${t.fg(labelColor, `${num}. ${opt.label}`)}`);
 			if (opt.description && !hideDescriptions) {
-				const wrapped = wrapTextWithAnsi(t.fg("muted", opt.description), width - 8);
+				const wrapped = wrapTextWithAnsi(t.fg("muted", opt.description), width - DESCRIPTION_INDENT_SINGLE);
 				for (const line of wrapped) add(`        ${line}`);
 			}
 		}
@@ -176,19 +214,14 @@ function buildPreviewLines(
 		if (opt.description?.trim()) text += `\n\n${opt.description}`;
 	}
 
-	const wrapped = wrapTextWithAnsi(t.fg("muted", text), Math.max(10, width));
+	const wrapped = wrapTextWithAnsi(t.fg("muted", text), Math.max(PREVIEW_MIN_WIDTH, width));
 	const lines = wrapped.slice(0, maxLines);
 	if (wrapped.length > maxLines) lines.push(t.fg("dim", "…"));
 	return lines;
 }
 
 /**
- * 渲染单个问题视图（spec FR-4）。
- * isSingle: 单问题模式（无 Tab 提示）。
- * editorText: freeform/comment 模式下当前编辑器文本（纯 string，由 component 持有）。
- */
-/**
- * freeform 模式：editor 已在 buildOptionLines 中原地渲染（[ ] <input>█ 行），
+ * freeform 模式：editor 已在 buildOptionLines 中原地渲染（[ ] <input> 反色光标 行），
  * buildEditorBlock 在此模式下不重复输出，**仅留出与正常 help 行同位置的视觉空隙**。
  * comment 模式：保留独立编辑块（与 normal help 行解耦：comment 行有更长的 prompt）。
  */
@@ -196,7 +229,8 @@ function buildEditorBlock(
 	theme: ThemeLike,
 	width: number,
 	mode: "freeform" | "comment",
-	editorText: string,
+	draftText: string,
+	cursorIndex?: number,
 ): string[] {
 	if (mode === "freeform") {
 		return [""];
@@ -209,12 +243,12 @@ function buildEditorBlock(
 	add("");
 	const prompt = t.fg("muted", " Your comment (optional):");
 	add(prompt);
-	// 渲染当前编辑器文本（单行；多行时按 \n 拆分）
-	for (const line of editorText.split("\n")) add(` ${line}`);
-	// 光标行
-	add(` ${t.fg("accent", "█")}`);
+	// 渲染当前编辑器文本，光标用反色高亮当前字符（surrogate pair 安全）
+	const pos = cursorIndex ?? draftText.length;
+	const cursorText = renderCursorText(draftText, pos);
+	add(` ${t.fg("text", cursorText)}`);
 	add("");
-	add(t.fg("dim", " Enter submit · Esc back"));
+	add(t.fg("dim", EDITOR_HINT));
 	return lines;
 }
 
@@ -225,14 +259,14 @@ function buildSplitPane(
 	theme: ThemeLike,
 	split: { left: number; right: number },
 	width: number,
-	editorText: string = "",
+	draftText: string = "",
 ): string[] {
 	const t = theme;
 	const lines: string[] = [];
 	const add = (s: string): void => {
 		lines.push(truncateToWidth(s, width));
 	};
-	const leftLines = buildOptionLines(q, state, theme, split.left, true, editorText);
+	const leftLines = buildOptionLines(q, state, theme, split.left, true, draftText);
 	const rightLines = buildPreviewLines(q, state, theme, split.right, Math.max(leftLines.length, 8));
 	const rowCount = Math.max(leftLines.length, rightLines.length);
 	const sep = t.fg("dim", SPLIT_PANE_SEPARATOR);
@@ -244,13 +278,18 @@ function buildSplitPane(
 	return lines;
 }
 
+/**
+ * 渲染单个问题视图（spec FR-4）。
+ * isSingle: 单问题模式（无 Tab 提示）。
+ * draftText: freeform/comment 模式下当前编辑器草稿（来自 QuestionState.draftText）。
+ */
 export function renderQuestionView(
 	q: Question,
 	state: QuestionState,
 	theme: ThemeLike,
 	width: number,
 	isSingle: boolean,
-	editorText: string,
+	draftText: string,
 ): string[] {
 	const t = theme;
 	const lines: string[] = [];
@@ -260,13 +299,13 @@ export function renderQuestionView(
 	const divider = (): void => add(t.fg("dim", "─".repeat(Math.max(0, width))));
 
 	// 问题文本（word-wrap）
-	const wrapped = wrapTextWithAnsi(t.fg("text", ` ${q.question}`), width - 2);
+	const wrapped = wrapTextWithAnsi(t.fg("text", ` ${q.question}`), width - QUESTION_TEXT_MARGIN);
 	for (const line of wrapped) add(line);
 
 	// 上下文（如有）
 	if (q.context?.trim()) {
 		divider();
-		const ctxWrapped = wrapTextWithAnsi(t.fg("muted", q.context), width - 2);
+		const ctxWrapped = wrapTextWithAnsi(t.fg("muted", q.context), width - QUESTION_TEXT_MARGIN);
 		for (const line of ctxWrapped) add(line);
 	}
 
@@ -284,24 +323,24 @@ export function renderQuestionView(
 	// 且右侧详情预览在输入自定义内容时无意义。隐藏 descriptions 以避免行数爆炸。
 	if (state.mode === "freeform" || state.mode === "comment") {
 		add("");
-		const optionLines = buildOptionLines(q, state, theme, width, false, editorText);
+		const optionLines = buildOptionLines(q, state, theme, width, false, draftText);
 		for (const line of optionLines) add(line);
-		const editorBlock = buildEditorBlock(theme, width, state.mode, editorText);
+		const editorBlock = buildEditorBlock(theme, width, state.mode, draftText, state.cursorIndex);
 		lines.push(...editorBlock);
 		if (state.mode === "freeform") {
 			// freeform 模式 help 行：光标锁在 Other 上，正在输入
-			add(t.fg("dim", " Enter submit · Esc back"));
+			add(t.fg("dim", EDITOR_HINT));
 		}
 		return lines;
 	}
 
 	if (!split) {
 		// 单列模式
-		const optionLines = buildOptionLines(q, state, theme, width, false, editorText);
+		const optionLines = buildOptionLines(q, state, theme, width, false, draftText);
 		for (const line of optionLines) add(line);
 	} else {
 		// 分屏模式
-		lines.push(...buildSplitPane(q, state, theme, split, width, editorText));
+		lines.push(...buildSplitPane(q, state, theme, split, width, draftText));
 	}
 
 	add("");

package/src/submit-view.ts

@@ -10,6 +10,22 @@ import {
 	type ThemeLike,
 } from "./types";
 
+/** 渲染 [ Submit ]   [ Cancel ] 按钮栏，返回带样式的单行字符串。
+ *  focus: null=纯展示（问题 tab footer），"submit"/"cancel"=高亮对应按钮（Submit tab）。
+ *  统一了 component.ts footer 版与 submit-view 内嵌版的样式逻辑。 */
+export function renderButtonBar(theme: ThemeLike, allDone: boolean, focus: "submit" | "cancel" | null): string {
+	const t = theme;
+	const isSubmit = focus === "submit";
+	const isCancel = focus === "cancel";
+	const submit = isSubmit
+		? (allDone ? t.fg("success", t.bold(" Submit ")) : t.fg("accent", t.bold(" Submit ")))
+		: (allDone ? t.fg("success", " Submit ") : t.fg("dim", " Submit "));
+	const cancel = isCancel
+		? t.fg("accent", t.bold(" Cancel "))
+		: t.fg("muted", " Cancel ");
+	return `${t.fg("dim", "[")}${submit}${t.fg("dim", "]")}   ${t.fg("dim", "[")}${cancel}${t.fg("dim", "]")}`;
+}
+
 /**
  * 获取单问题的答案文本（供 Submit tab 显示）。
  * 返回 null 表示未答。
@@ -84,13 +100,7 @@ export function renderSubmitView(
 
 	// 内嵌按钮栏：[ Submit ]   [ Cancel ]，根据 focus 高亮
 	add("");
-	const isSubmit = focus === "submit";
-	const isCancel = focus === "cancel";
-	const submitBtn = isSubmit
-		? (allDone ? t.fg("success", t.bold(" Submit ")) : t.fg("accent", t.bold(" Submit ")))
-		: (allDone ? t.fg("success", " Submit ") : t.fg("dim", " Submit "));
-	const cancelBtn = isCancel ? t.fg("accent", t.bold(" Cancel ")) : t.fg("muted", " Cancel ");
-	add(`${t.fg("dim", "[")}${submitBtn}${t.fg("dim", "]")}   ${t.fg("dim", "[")}${cancelBtn}${t.fg("dim", "]")}`);
+	add(renderButtonBar(t, allDone, focus));
 
 	// Submit tab 帮助行
 	add("");

package/src/types.ts

@@ -30,7 +30,7 @@ export const OptionSchema = Type.Object({
 export const QuestionSchema = Type.Object({
 	question: Type.String({
 		description:
-			"Full question text. Must be one self-contained decision; avoid multi-part questions. Plain text only (no newlines or control characters).",
+			"Full question text. Must be one self-contained decision; avoid multi-part questions. ≤1000 chars; plain single-line text only (no newlines or control characters).",
 	}),
 	header: Type.Optional(
 		Type.String({
@@ -63,7 +63,6 @@ export const InputSchema = Type.Object({
 // ── 派生类型 ─────────────────────────────────────────
 export type Option = Static<typeof OptionSchema>;
 export type Question = Static<typeof QuestionSchema>;
-export type Input = Static<typeof InputSchema>;
 
 // ── Result schema（details，renderResult 数据源） ─────
 export const ResultSchema = Type.Object({
@@ -108,10 +107,17 @@ export interface QuestionState {
 	confirmed: boolean;
 	/** Other 自由文本答案；null=未输入 */
 	freeTextValue: string | null;
+	/** freeform Esc 保存的未提交草稿；null=无草稿。
+	 *  与 freeTextValue（已提交答案）分离，避免放弃的草稿污染答案、触发 auto-confirm。 */
+	freeDraft: string | null;
 	/** 可选评论；null=未输入 */
 	commentValue: string | null;
 	/** 当前交互模式 */
 	mode: QuestionMode;
+	/** 编辑器草稿文本（每问题独立持有，进编辑器时预填、退出时清空） */
+	draftText: string;
+	/** 进入编辑器前保存的 options 光标位置（退出编辑器时恢复） */
+	savedOptionsCursorIndex: number;
 }
 
 /** 创建初始 QuestionState */
@@ -122,7 +128,23 @@ export function createQuestionState(): QuestionState {
 		selectedIndices: new Set<number>(),
 		confirmed: false,
 		freeTextValue: null,
+		freeDraft: null,
 		commentValue: null,
 		mode: "options",
+		draftText: "",
+		savedOptionsCursorIndex: 0,
 	};
 }
+
+// ── UTF-16 surrogate pair 工具（编辑器光标移动/删除/渲染共用） ──
+/** 高代理位掩码：charCode & 0xFC00 === 0xD800 判定 surrogate pair 前半 */
+export const SURROGATE_HIGH_MASK = 0xFC00;
+/** 高代理起始码点（surrogate pair 前半的判定值） */
+export const SURROGATE_HIGH_START = 0xD800;
+/** 一个 surrogate pair 占用的 UTF-16 code unit 数 */
+export const SURROGATE_PAIR_LEN = 2;
+
+/** 检查 s[i] 是否是 UTF-16 高代理（surrogate pair 的前半部分） */
+export function isHighSurrogate(s: string, i: number): boolean {
+	return (s.charCodeAt(i) & SURROGATE_HIGH_MASK) === SURROGATE_HIGH_START;
+}

package/src/validate.ts

@@ -1,5 +1,5 @@
 // src/validate.ts
-import { type Question,QUESTION_MAX_CHARS } from "./types";
+import { HEADER_MAX_CHARS, type Question, QUESTION_MAX_CHARS } from "./types";
 
 /** 控制字符（含 \n \r \t 等）：question 文本禁止包含，避免 answers key 含不可见字符（spec FR-2） */
 const CONTROL_CHAR_RE = /[\x00-\x1f\x7f]/;
@@ -57,5 +57,13 @@ export function validateInput(questions: Question[]): string | null {
 		}
 	}
 
+	// 4. header 长度上限（若提供）。单/多问题均校验：超出会在 tab 栏被静默截断，
+	//    这里提前拒绝，让 LLM 拿到可修复错误而非残缺 UI（兑现 schema description 的 ≤12 契约）。
+	for (const q of questions) {
+		if (q.header !== undefined && q.header.length > HEADER_MAX_CHARS) {
+			return `Header exceeds ${HEADER_MAX_CHARS} chars: "${q.header.slice(0, 20)}..." in question "${q.question}". Shorten it; longer headers are truncated in the tab bar.`;
+		}
+	}
+
 	return null;
 }