@geoqiao/pi-ask 1.1.0

package/src/ui/render-submit.ts

@@ -0,0 +1,168 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { UI_TEXT } from "../constants/ui.ts";
+import type { AskState } from "../types.ts";
+import {
+	mergeColumns,
+	pushSavedNote,
+	pushWrappedText,
+} from "./render-helpers.ts";
+import type { Theme } from "./render-types.ts";
+import { buildReviewScreenModel } from "./view-models/review.ts";
+
+export function renderSubmitScreen(
+	lines: string[],
+	state: AskState,
+	theme: Theme,
+	width: number,
+	reviewShortcutHint?: string
+) {
+	const model = buildReviewScreenModel(state, width);
+	if (model.layout === "wide") {
+		const rightWidth = Math.max(1, width - model.actionColumnWidth - 2);
+		const reviewLines = renderSubmitReviewLines(model, theme, rightWidth);
+		const actionLines = renderSubmitActions(
+			model,
+			theme,
+			model.actionColumnWidth
+		);
+		for (const line of mergeColumns(
+			actionLines,
+			reviewLines,
+			model.actionColumnWidth,
+			width
+		)) {
+			lines.push(line);
+		}
+		appendReviewShortcutHint(lines, reviewShortcutHint, theme, width);
+		return;
+	}
+
+	const reviewLines = renderSubmitReviewLines(model, theme, width);
+	const actionLines = renderSubmitActions(model, theme, width);
+	lines.push(...reviewLines);
+	lines.push("");
+	lines.push(...actionLines);
+	appendReviewShortcutHint(lines, reviewShortcutHint, theme, width);
+}
+
+function renderSubmitReviewLines(
+	model: ReturnType<typeof buildReviewScreenModel>,
+	theme: Theme,
+	width: number
+): string[] {
+	const lines: string[] = [];
+	pushWrappedText(lines, UI_TEXT.reviewTitle, width, theme, "accent", " ", " ");
+	lines.push("");
+
+	for (const [index, question] of model.questions.entries()) {
+		renderReviewQuestion(lines, question, theme, width);
+		if (index < model.questions.length - 1) {
+			lines.push("");
+		}
+	}
+
+	return lines;
+}
+
+function renderReviewQuestion(
+	lines: string[],
+	question: ReturnType<typeof buildReviewScreenModel>["questions"][number],
+	theme: Theme,
+	width: number
+) {
+	pushWrappedText(lines, question.label, width, theme, "text", " ", " ");
+	if (question.unanswered) {
+		lines.push(
+			truncateToWidth(`   ${theme.fg("dim", UI_TEXT.unanswered)}`, width)
+		);
+		return;
+	}
+
+	if (question.note) {
+		pushSavedNote({
+			lines,
+			note: question.note,
+			width,
+			theme,
+			indent: "     ",
+		});
+	}
+
+	for (const selection of question.selections ?? []) {
+		pushWrappedText(
+			lines,
+			`→ ${selection.label}`,
+			width,
+			theme,
+			"success",
+			"   ",
+			"     "
+		);
+		if (selection.note) {
+			pushSavedNote({
+				lines,
+				note: selection.note,
+				width,
+				theme,
+				indent: "     ",
+			});
+		}
+	}
+
+	if (question.answerText) {
+		pushWrappedText(
+			lines,
+			`→ ${question.answerText}`,
+			width,
+			theme,
+			question.isCustomOnly ? "text" : "success",
+			"   ",
+			"     "
+		);
+	}
+
+	for (const optionNote of question.extraOptionNotes ?? []) {
+		pushSavedNote({
+			lines,
+			note: optionNote.note,
+			width,
+			theme,
+			indent: "     ",
+			label: optionNote.label,
+		});
+	}
+}
+
+function renderSubmitActions(
+	model: ReturnType<typeof buildReviewScreenModel>,
+	theme: Theme,
+	width: number
+): string[] {
+	const lines: string[] = [];
+	for (const [index, action] of model.actions.entries()) {
+		const prefix = action.selected ? "❯ " : "  ";
+		pushWrappedText(
+			lines,
+			`${index + 1}. ${action.label}`,
+			width,
+			theme,
+			action.selected ? "accent" : "text",
+			prefix,
+			prefix
+		);
+	}
+	return lines;
+}
+
+function appendReviewShortcutHint(
+	lines: string[],
+	hint: string | undefined,
+	theme: Theme,
+	width: number
+) {
+	if (!hint) {
+		return;
+	}
+	lines.push("");
+	pushWrappedText(lines, hint, width, theme, "dim", " ", " ");
+}

package/src/ui/render-types.ts

@@ -0,0 +1,33 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { Editor } from "@earendil-works/pi-tui";
+import type {
+	getAnswer,
+	getCurrentQuestion,
+	getRenderableOptions,
+} from "../state/selectors.ts";
+import type { AskDisplayOption, AskState } from "../types.ts";
+
+export type Theme = ExtensionContext["ui"]["theme"];
+
+export interface QuestionRenderContext {
+	editor: Editor;
+	lines: string[];
+	options: ReturnType<typeof getRenderableOptions>;
+	question: NonNullable<ReturnType<typeof getCurrentQuestion>>;
+	state: AskState;
+	theme: Theme;
+	width: number;
+}
+
+export interface OptionDetailRenderContext {
+	answer: ReturnType<typeof getAnswer>;
+	editor: Editor;
+	lines: string[];
+	option: AskDisplayOption | undefined;
+	questionId: string;
+	selected?: boolean;
+	state: AskState;
+	theme: Theme;
+	width: number;
+	withGap?: boolean;
+}

package/src/ui/render.ts

@@ -0,0 +1,53 @@
+import type { AskConfig } from "../config/schema.ts";
+import {
+	getCurrentQuestion,
+	getRenderableOptions,
+	isSubmitTab,
+} from "../state/selectors.ts";
+import type { AskState } from "../types.ts";
+import { renderFrameFooter, renderFrameHeader } from "./render-frame.ts";
+import { renderQuestionScreen } from "./render-question.ts";
+import { renderSubmitScreen } from "./render-submit.ts";
+import type { QuestionRenderContext, Theme } from "./render-types.ts";
+
+export function renderAskScreen(args: {
+	config: AskConfig;
+	footerNotice?: string;
+	reviewShortcutHint?: string;
+	state: AskState;
+	theme: Theme;
+	width: number;
+	editor: QuestionRenderContext["editor"];
+}): string[] {
+	const {
+		config,
+		footerNotice,
+		reviewShortcutHint,
+		state,
+		theme,
+		width,
+		editor,
+	} = args;
+	const lines: string[] = [];
+	const question = getCurrentQuestion(state);
+	const options = getRenderableOptions(question);
+
+	renderFrameHeader({ lines, state, theme, width });
+
+	if (isSubmitTab(state)) {
+		renderSubmitScreen(lines, state, theme, width, reviewShortcutHint);
+	} else if (question) {
+		renderQuestionScreen({
+			lines,
+			state,
+			question,
+			options,
+			theme,
+			width,
+			editor,
+		});
+	}
+
+	renderFrameFooter({ config, footerNotice, lines, state, theme, width });
+	return lines;
+}

package/src/ui/review-shortcuts.ts

@@ -0,0 +1,43 @@
+import { SUBMIT_CHOICES } from "../constants/text.ts";
+
+const REVIEW_SHORTCUT_DIGIT_MIN = 1;
+const REVIEW_SHORTCUT_DIGIT_MAX = 3;
+
+export interface ReviewShortcutResolution {
+	actionIndex?: number;
+	confirmed: boolean;
+	pendingActionIndex?: number;
+}
+
+export function resolveReviewShortcutDoublePress(
+	digit: number,
+	pendingActionIndex?: number
+): ReviewShortcutResolution {
+	if (digit < REVIEW_SHORTCUT_DIGIT_MIN || digit > REVIEW_SHORTCUT_DIGIT_MAX) {
+		return { confirmed: false };
+	}
+
+	const actionIndex = digit - 1;
+	if (pendingActionIndex === actionIndex) {
+		return { actionIndex, confirmed: true };
+	}
+
+	return {
+		actionIndex,
+		confirmed: false,
+		pendingActionIndex: actionIndex,
+	};
+}
+
+export function getReviewShortcutHint(pendingActionIndex?: number): string {
+	if (pendingActionIndex === undefined) {
+		return "Press 1, 2, or 3 twice to confirm a review action.";
+	}
+
+	const actionLabel = SUBMIT_CHOICES[pendingActionIndex];
+	if (!actionLabel) {
+		return "Press 1, 2, or 3 twice to confirm a review action.";
+	}
+
+	return `Press ${pendingActionIndex + 1} again to ${actionLabel}.`;
+}