one-code-extension 0.1.3 → 0.3.0

package/extensions/ask-user/widget.ts

@@ -0,0 +1,533 @@
+/**
+ * The multi-question widget behind ask_user_question (pure): state machine and
+ * rendering for Claude Code's tabbed question dialog — one tab per question
+ * plus Submit, a side-by-side preview pane on single-select questions whose
+ * options carry `preview`, per-question notes ("press n to add notes"),
+ * multi-select checkboxes, an inline free-text row, and "Chat about this",
+ * which hands the whole batch back to the conversation. The thin ctx.ui.custom
+ * component in index.ts owns nothing but this state and repaint calls — same
+ * split as plan-mode's viewer.
+ *
+ * Every rendered line must stay within the width given: pi-tui crashes the
+ * whole app on an overwide line, so renderWidget runs each line through the
+ * ANSI-aware truncateLine as a final guard, cutting plain text before
+ * painting wherever it can along the way.
+ */
+
+import { cutPlainText, padPlainText, truncateLine, visibleWidth, wrapPlainText } from "../lib/tui-render.ts";
+import type { Answer, Question } from "./questions.ts";
+
+export type Paint = (color: string, text: string) => string;
+export type Bold = (text: string) => string;
+
+/** The theme surface the widget paints with (safeTheme* wrappers from index.ts). */
+export interface WidgetStyle {
+	paint: Paint;
+	bold: Bold;
+	/** Reverse video — the active tab's background chip. */
+	inverse: (text: string) => string;
+}
+
+const TAB_UNANSWERED = "⊡";
+const TAB_ANSWERED = "⊠";
+const OTHER_PLACEHOLDER = "Type something.";
+const CHAT_LABEL = "Chat about this";
+const NOTES_PLACEHOLDER = "press n to add notes";
+const MAX_PREVIEW_ROWS = 12;
+
+// ── state ────────────────────────────────────────────────────────────────
+
+export interface QuestionState {
+	cursor: number;
+	/** Selected option indices (at most one unless multiSelect). */
+	selected: number[];
+	otherText: string;
+	/** Typed free-text is part of the answer. Only ever set with a non-empty otherText. */
+	otherChosen: boolean;
+	notes: string;
+	/** Multi-select "Next" pressed — counts as answered even with nothing ticked. */
+	committed: boolean;
+}
+
+export interface WidgetState {
+	questions: Question[];
+	/** 0..N-1 = question tabs, N = the Submit tab. */
+	tab: number;
+	/** Present while typing into the free-text row or the notes line. */
+	editing?: { field: "other" | "notes"; draft: string };
+	qs: QuestionState[];
+}
+
+export type WidgetResult =
+	| { kind: "submit"; answers: Answer[] }
+	| { kind: "chat" }
+	/** Esc; `answers` holds what the user had picked on other tabs, never submitted. */
+	| { kind: "cancel"; answers: Answer[] };
+
+export function createWidgetState(questions: Question[]): WidgetState {
+	return {
+		questions,
+		tab: 0,
+		qs: questions.map(() => ({
+			cursor: 0,
+			selected: [],
+			otherText: "",
+			otherChosen: false,
+			notes: "",
+			committed: false,
+		})),
+	};
+}
+
+// ── row model ────────────────────────────────────────────────────────────
+
+export type Row = { kind: "option"; index: number } | { kind: "other" } | { kind: "next" } | { kind: "chat" };
+
+/** Preview pane applies to single-select questions with at least one preview. */
+export function hasPreviews(question: Question): boolean {
+	return !question.multiSelect && question.options.some((option) => Boolean(option.preview?.trim()));
+}
+
+/**
+ * Preview questions get no free-text row (notes are their free-text channel,
+ * matching Claude Code); every other question gets one. Multi-select adds an
+ * explicit "Next" to commit. "Chat about this" is always last.
+ */
+export function rowsFor(question: Question): Row[] {
+	const rows: Row[] = question.options.map((_, index) => ({ kind: "option", index }));
+	if (!hasPreviews(question)) rows.push({ kind: "other" });
+	if (question.multiSelect) rows.push({ kind: "next" });
+	rows.push({ kind: "chat" });
+	return rows;
+}
+
+/**
+ * Display numbers per row — the single source for both rendering and digit
+ * jumps, so a digit can only ever activate a row whose number is on screen.
+ * "Next" gets none (Claude Code leaves it unnumbered), and the preview layout
+ * shows "Chat about this" unnumbered too.
+ */
+export function rowNumbers(question: Question, rows: Row[]): (number | undefined)[] {
+	const unnumbered = (row: Row) => row.kind === "next" || (row.kind === "chat" && hasPreviews(question));
+	let count = 0;
+	return rows.map((row) => (unnumbered(row) ? undefined : ++count));
+}
+
+export function isAnswered(state: QuestionState): boolean {
+	return state.committed || state.selected.length > 0 || state.otherChosen;
+}
+
+// ── key handling ─────────────────────────────────────────────────────────
+
+export type WidgetKey =
+	| { kind: "up" | "down" | "prevTab" | "nextTab" | "enter" | "esc" | "backspace" }
+	| { kind: "text"; text: string };
+
+export function decodeWidgetKey(data: string): WidgetKey | undefined {
+	switch (data) {
+		case "\x1b[A":
+		case "\x1bOA":
+			return { kind: "up" };
+		case "\x1b[B":
+		case "\x1bOB":
+			return { kind: "down" };
+		case "\x1b[D":
+		case "\x1bOD":
+		case "\x1b[Z": // shift+tab
+			return { kind: "prevTab" };
+		case "\x1b[C":
+		case "\x1bOC":
+		case "\t":
+			return { kind: "nextTab" };
+		case "\r":
+		case "\n":
+			return { kind: "enter" };
+		case "\x1b":
+		case "\x03": // ctrl+c — same intent as escape while the dialog is focused
+			return { kind: "esc" };
+		case "\x7f":
+		case "\b":
+			return { kind: "backspace" };
+		default: {
+			// Unrecognized escape sequences (home/end/F-keys) must not leak their
+			// tail characters into a text draft.
+			if (data.startsWith("\x1b")) return undefined;
+			const text = [...data].filter((char) => char >= " " && char !== "\x7f").join("");
+			return text ? { kind: "text", text } : undefined;
+		}
+	}
+}
+
+/**
+ * Advance one key. Mutates `state`; returns a result when the dialog is done.
+ */
+export function applyWidgetKey(state: WidgetState, key: WidgetKey): WidgetResult | undefined {
+	if (state.editing) return applyEditingKey(state, key);
+
+	const submitTab = state.questions.length;
+	switch (key.kind) {
+		case "esc":
+			return { kind: "cancel", answers: answeredSoFar(state) };
+		case "nextTab":
+			state.tab = (state.tab + 1) % (submitTab + 1);
+			return;
+		case "prevTab":
+			state.tab = (state.tab + submitTab) % (submitTab + 1);
+			return;
+		default:
+			break;
+	}
+
+	if (state.tab === submitTab) {
+		if (key.kind === "enter") {
+			const unanswered = state.questions.findIndex((_q, i) => !isAnswered(state.qs[i]));
+			if (unanswered >= 0) {
+				state.tab = unanswered;
+				return;
+			}
+			return { kind: "submit", answers: collectAnswers(state) };
+		}
+		return;
+	}
+
+	const question = state.questions[state.tab];
+	const questionState = state.qs[state.tab];
+	const rows = rowsFor(question);
+
+	switch (key.kind) {
+		case "up":
+			questionState.cursor = Math.max(0, questionState.cursor - 1);
+			return;
+		case "down":
+			questionState.cursor = Math.min(rows.length - 1, questionState.cursor + 1);
+			return;
+		case "enter":
+			return activateRow(state, rows[questionState.cursor]);
+		case "text": {
+			if (key.text === "n" && hasPreviews(question)) {
+				state.editing = { field: "notes", draft: questionState.notes };
+				return;
+			}
+			const digit = Number(key.text);
+			const target = rowNumbers(question, rows).indexOf(digit);
+			if (target >= 0) {
+				questionState.cursor = target;
+				return activateRow(state, rows[target]);
+			}
+			return;
+		}
+		default:
+			return;
+	}
+}
+
+function activateRow(state: WidgetState, row: Row): WidgetResult | undefined {
+	const question = state.questions[state.tab];
+	const questionState = state.qs[state.tab];
+	switch (row.kind) {
+		case "option": {
+			if (question.multiSelect) {
+				const at = questionState.selected.indexOf(row.index);
+				if (at >= 0) questionState.selected.splice(at, 1);
+				else questionState.selected.push(row.index);
+				return;
+			}
+			questionState.selected = [row.index];
+			questionState.otherChosen = false;
+			advance(state);
+			return;
+		}
+		case "other":
+			state.editing = { field: "other", draft: questionState.otherText };
+			return;
+		case "next":
+			questionState.committed = true;
+			advance(state);
+			return;
+		case "chat":
+			return { kind: "chat" };
+	}
+}
+
+function applyEditingKey(state: WidgetState, key: WidgetKey): WidgetResult | undefined {
+	const editing = state.editing;
+	if (!editing) return;
+	const question = state.questions[state.tab];
+	const questionState = state.qs[state.tab];
+
+	switch (key.kind) {
+		case "esc":
+			state.editing = undefined;
+			return;
+		case "backspace":
+			editing.draft = editing.draft.slice(0, -1);
+			return;
+		case "text":
+			editing.draft += key.text;
+			return;
+		case "enter": {
+			state.editing = undefined;
+			if (editing.field === "notes") {
+				questionState.notes = editing.draft.trim();
+				return;
+			}
+			questionState.otherText = editing.draft.trim();
+			questionState.otherChosen = questionState.otherText !== "";
+			// A typed answer on a single-select question IS the answer.
+			if (questionState.otherChosen && !question.multiSelect) {
+				questionState.selected = [];
+				advance(state);
+			}
+			return;
+		}
+		default:
+			return; // arrows/tab are inert while typing
+	}
+}
+
+/** Move to the next unanswered question, or the Submit tab when none remain. */
+function advance(state: WidgetState): void {
+	const count = state.questions.length;
+	for (let step = 1; step < count; step++) {
+		const i = (state.tab + step) % count;
+		if (!isAnswered(state.qs[i])) {
+			state.tab = i;
+			return;
+		}
+	}
+	state.tab = count;
+}
+
+// ── answers ──────────────────────────────────────────────────────────────
+
+function collectAnswer(question: Question, state: QuestionState): Answer {
+	const labels = [...state.selected].sort((a, b) => a - b).map((index) => question.options[index].label);
+	if (state.otherChosen) labels.push(state.otherText);
+	return {
+		question: question.question,
+		header: question.header,
+		selected: labels,
+		freeform: labels.length > 0 && state.selected.length === 0,
+		notes: state.notes || undefined,
+	};
+}
+
+export function collectAnswers(state: WidgetState): Answer[] {
+	return state.questions.map((question, i) => collectAnswer(question, state.qs[i]));
+}
+
+/** Answers for the questions already answered — what an Esc abandons. */
+function answeredSoFar(state: WidgetState): Answer[] {
+	return state.questions.flatMap((question, i) =>
+		isAnswered(state.qs[i]) ? [collectAnswer(question, state.qs[i])] : [],
+	);
+}
+
+// ── rendering ────────────────────────────────────────────────────────────
+
+export function renderWidget(state: WidgetState, style: WidgetStyle, width: number): string[] {
+	const { paint } = style;
+	const out: string[] = [paint("dim", "─".repeat(Math.max(0, width)))];
+	out.push(renderTabBar(state, style));
+	out.push("");
+	if (state.tab === state.questions.length) renderSubmitTab(state, paint, width, out);
+	else renderQuestionTab(state, style, width, out);
+	out.push("");
+	out.push(paint("dim", cutPlainText(footerFor(state), Math.max(1, width - 1))));
+	// Final ANSI-aware guard: pi-tui crashes the app on an overwide line, and
+	// the painted tab bar can exceed narrow widths.
+	return out.map((line) => truncateLine(line, width));
+}
+
+/** Active tab is an accent chip (reverse video), like Claude Code's. */
+function renderTabBar(state: WidgetState, style: WidgetStyle): string {
+	const { paint, inverse } = style;
+	const chip = (text: string, active: boolean) => (active ? inverse(paint("accent", ` ${text} `)) : ` ${text} `);
+	const segments = state.questions.map((question, i) => {
+		const glyph = isAnswered(state.qs[i]) ? TAB_ANSWERED : TAB_UNANSWERED;
+		return chip(`${glyph} ${question.header}`, i === state.tab);
+	});
+	segments.push(chip("✔ Submit", state.tab === state.questions.length));
+	return `${paint("dim", "←")} ${segments.join(" ")} ${paint("dim", "→")}`;
+}
+
+export function footerFor(state: WidgetState): string {
+	if (state.editing) return "Enter to confirm · Esc to back out";
+	if (state.tab === state.questions.length) return "Enter to submit · Tab/shift+Tab to switch questions · Esc to cancel";
+	// The preview layout spells out ↑/↓ and the notes key; the stacked layout
+	// uses Claude Code's shorter wording.
+	if (hasPreviews(state.questions[state.tab]))
+		return "Enter to select · ↑/↓ to navigate · n to add notes · Tab/shift+Tab to switch questions · Esc to cancel";
+	return "Enter to select · Tab/shift+Tab or arrow keys to navigate · Esc to cancel";
+}
+
+function renderSubmitTab(state: WidgetState, paint: Paint, width: number, out: string[]): void {
+	const cut = (line: string) => cutPlainText(line, Math.max(1, width - 1));
+	for (const [i, question] of state.questions.entries()) {
+		const questionState = state.qs[i];
+		if (isAnswered(questionState)) {
+			const answer = collectAnswer(question, questionState);
+			const value = answer.selected.length > 0 ? answer.selected.join(", ") : "(nothing selected)";
+			out.push(cut(`· ${question.question} → ${value}`));
+		} else {
+			out.push(paint("dim", cut(`· ${question.question} → (unanswered)`)));
+		}
+	}
+	const ready = state.questions.every((_q, i) => isAnswered(state.qs[i]));
+	out.push("");
+	out.push(
+		ready
+			? paint("accent", cut("All questions answered — press Enter to submit."))
+			: paint("dim", cut("Some questions are unanswered — Enter jumps to the first one.")),
+	);
+}
+
+function renderQuestionTab(state: WidgetState, style: WidgetStyle, width: number, out: string[]): void {
+	const question = state.questions[state.tab];
+	for (const line of wrapPlainText(question.question, Math.max(10, width - 1))) out.push(style.bold(line));
+	out.push("");
+	if (hasPreviews(question)) renderPreviewRows(state, style, width, out);
+	else renderStackedRows(state, style, width, out);
+}
+
+/** `❯` on the focused row; selection and focus both paint accent. */
+function pointerFor(state: WidgetState, rowIndex: number): string {
+	return !state.editing && state.qs[state.tab].cursor === rowIndex ? "❯" : " ";
+}
+
+/** The divider + "Chat about this" row both layouts end with (always the last row). */
+function pushChatRow(state: WidgetState, rows: Row[], style: WidgetStyle, width: number, out: string[]): void {
+	const { paint, bold } = style;
+	const question = state.questions[state.tab];
+	const rowIndex = rows.length - 1;
+	const number = rowNumbers(question, rows)[rowIndex];
+	const label = number === undefined ? CHAT_LABEL : `${number}. ${CHAT_LABEL}`;
+	out.push(paint("dim", "─".repeat(Math.max(0, width - 1))));
+	const line = bold(cutPlainText(`${pointerFor(state, rowIndex)} ${label}`, Math.max(1, width - 1)));
+	const focused = !state.editing && state.qs[state.tab].cursor === rowIndex;
+	out.push(focused ? paint("accent", line) : line);
+}
+
+function renderStackedRows(state: WidgetState, style: WidgetStyle, width: number, out: string[]): void {
+	const { paint, bold } = style;
+	const question = state.questions[state.tab];
+	const questionState = state.qs[state.tab];
+	const rows = rowsFor(question);
+	const numbers = rowNumbers(question, rows);
+	const cut = (line: string) => cutPlainText(line, Math.max(1, width - 1));
+	// Claude Code's look: labels bold, descriptions muted underneath, the whole
+	// focused/selected row accent on top of that. Overflow is handled by
+	// renderWidget's final truncateLine pass.
+	const labelRow = (prefix: string, label: string, highlight: boolean) => {
+		const line = `${prefix}${bold(label)}`;
+		return highlight ? paint("accent", line) : line;
+	};
+
+	for (const [r, row] of rows.entries()) {
+		const focused = !state.editing && questionState.cursor === r;
+		const pointer = pointerFor(state, r);
+		const number = `${numbers[r]}.`;
+		switch (row.kind) {
+			case "option": {
+				const option = question.options[row.index];
+				const check = question.multiSelect ? (questionState.selected.includes(row.index) ? "[✔] " : "[ ] ") : "";
+				const selected = questionState.selected.includes(row.index);
+				out.push(labelRow(`${pointer} ${number} ${check}`, option.label, focused || selected));
+				if (option.description) out.push(paint("muted", cut(`   ${" ".repeat(number.length)}${option.description}`)));
+				break;
+			}
+			case "other": {
+				const editing = state.editing?.field === "other";
+				const check = question.multiSelect ? (questionState.otherChosen ? "[✔] " : "[ ] ") : "";
+				if (editing) {
+					out.push(paint("accent", cut(`❯ ${number} ${check}${state.editing?.draft ?? ""}▏`)));
+				} else if (questionState.otherText) {
+					out.push(labelRow(`${pointer} ${number} ${check}`, questionState.otherText, focused || questionState.otherChosen));
+				} else {
+					out.push(labelRow(`${pointer} ${number} ${check}`, OTHER_PLACEHOLDER, focused));
+				}
+				break;
+			}
+			case "next": {
+				const line = bold(cut(`${pointer}    Next`));
+				out.push(focused ? paint("accent", line) : line);
+				break;
+			}
+			case "chat":
+				pushChatRow(state, rows, style, width, out);
+				break;
+		}
+	}
+}
+
+function renderPreviewRows(state: WidgetState, style: WidgetStyle, width: number, out: string[]): void {
+	const { paint } = style;
+	const question = state.questions[state.tab];
+	const questionState = state.qs[state.tab];
+	const rows = rowsFor(question);
+	const numbers = rowNumbers(question, rows);
+	const cut = (line: string) => cutPlainText(line, Math.max(1, width - 1));
+
+	// Left column: numbered option labels, padded plain before painting so the
+	// ANSI escapes never enter the width math.
+	const leftPlain = question.options.map((option, i) => `${pointerFor(state, i)} ${numbers[i]}. ${option.label}`);
+	const leftWidth = Math.min(
+		Math.max(...leftPlain.map((line) => visibleWidth(line))) + 2,
+		Math.max(12, Math.floor(width * 0.45)),
+	);
+	const leftLines = leftPlain.map((line, i) => {
+		const padded = padPlainText(line, leftWidth);
+		const focused = !state.editing && questionState.cursor === i;
+		return focused || questionState.selected.includes(i) ? paint("accent", padded) : padded;
+	});
+
+	// The preview follows the focused option (falling back to the selection).
+	const focusIndex =
+		questionState.cursor < question.options.length ? questionState.cursor : (questionState.selected[0] ?? 0);
+	const preview = question.options[focusIndex]?.preview?.trim();
+	const boxWidth = Math.max(0, width - leftWidth - 2);
+	const sideBySide = boxWidth >= 18;
+	const box = preview ? previewBox(preview, sideBySide ? boxWidth : Math.max(18, width - 3), paint) : [];
+
+	if (sideBySide) {
+		for (let i = 0; i < Math.max(leftLines.length, box.length); i++) {
+			out.push(`${leftLines[i] ?? " ".repeat(leftWidth)}${box[i] ?? ""}`);
+		}
+	} else {
+		out.push(...leftLines.map((line) => line.trimEnd()));
+		if (box.length > 0) {
+			out.push("");
+			out.push(...box.map((line) => `  ${line}`));
+		}
+	}
+
+	// Notes sit under the preview, aligned with the box when side by side.
+	const notesIndent = " ".repeat(sideBySide ? leftWidth : 2);
+	out.push("");
+	if (state.editing?.field === "notes") {
+		out.push(`${notesIndent}${paint("accent", "Notes: ")}${cut(state.editing.draft)}▏`);
+	} else if (questionState.notes) {
+		out.push(`${notesIndent}${paint("accent", "Notes: ")}${cut(questionState.notes)}`);
+	} else {
+		out.push(`${notesIndent}${paint("accent", "Notes: ")}${paint("dim", NOTES_PLACEHOLDER)}`);
+	}
+
+	out.push("");
+	pushChatRow(state, rows, style, width, out);
+}
+
+function previewBox(preview: string, maxOuter: number, paint: Paint): string[] {
+	const inner = Math.max(8, maxOuter - 4);
+	const wrapped = wrapPlainText(preview.replace(/\t/g, "  "), inner);
+	const shown = wrapped.slice(0, MAX_PREVIEW_ROWS);
+	const hidden = wrapped.length - shown.length;
+	const contentWidth = Math.min(inner, Math.max(8, ...shown.map((line) => visibleWidth(line))));
+	const border = paint("dim", "│");
+	const body = shown.map((line) => `${border} ${padPlainText(line, contentWidth)} ${border}`);
+	if (hidden > 0) body.push(`${border} ${paint("dim", padPlainText(`… +${hidden} more lines`, contentWidth))} ${border}`);
+	return [
+		paint("dim", `┌${"─".repeat(contentWidth + 2)}┐`),
+		...body,
+		paint("dim", `└${"─".repeat(contentWidth + 2)}┘`),
+	];
+}

package/extensions/auto-mode/actions.ts

@@ -37,6 +37,15 @@ export interface SubagentActionsPayload {
 	background?: boolean;
 	/** Agent name, used to label a background review. */
 	agentName?: string;
+	/**
+	 * Background only: the gate answers here exactly once — the rendered flag
+	 * text when the review raised a concern, undefined when the sequence is
+	 * fine or auto mode is off — so the emitter can deliver the verdict with
+	 * the completion report rather than as a trailing notice. Answered
+	 * synchronously when no review will run, so the emitter never waits for
+	 * nothing.
+	 */
+	onReview?: (flag: string | undefined) => void;
 }
 
 /** Per-action and total caps: a long-running child must not blow up the prompt. */
@@ -50,29 +59,3 @@ export function recordAction(log: ChildAction[], toolName: string, input: unknow
 	const subject = typeof raw === "string" ? raw : JSON.stringify(raw);
 	log.push({ toolName, subject: subject.slice(0, SUBJECT_LIMIT) });
 }
-
-/** Render the log for the classifier, collapsing repeats so 40 reads read as one line. */
-export function renderActions(actions: ChildAction[]): string {
-	const lines: string[] = [];
-	let previous: string | undefined;
-	let repeats = 0;
-
-	const flush = () => {
-		if (previous === undefined) return;
-		lines.push(repeats > 1 ? `${previous} (×${repeats})` : previous);
-	};
-
-	for (const action of actions) {
-		const line = action.subject ? `${action.toolName}: ${action.subject}` : action.toolName;
-		if (line === previous) {
-			repeats++;
-			continue;
-		}
-		flush();
-		previous = line;
-		repeats = 1;
-	}
-	flush();
-
-	return lines.join("\n");
-}