pi-ask-tool-extension 0.1.5 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-ask-tool-extension",
-  "version": "0.1.5",
+  "version": "0.2.2",
   "description": "Ask tool extension for pi with tabbed questioning and inline note editing",
   "repository": {
     "type": "git",

package/src/ask-inline-note.ts

@@ -1,6 +1,10 @@
+import { wrapTextWithAnsi } from "@mariozechner/pi-tui";
+
 const INLINE_NOTE_SEPARATOR = " — note: ";
 const INLINE_EDIT_CURSOR = "▍";
 
+export const INLINE_NOTE_WRAP_PADDING = 2;
+
 function sanitizeNoteForInlineDisplay(rawNote: string): string {
 	return rawNote.replace(/[\r\n\t]/g, " ").replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
 }
@@ -31,14 +35,31 @@ export function buildOptionLabelWithInlineNote(
 	}
 
 	const labelPrefix = `${baseOptionLabel}${INLINE_NOTE_SEPARATOR}`;
-	const rawInlineNote = isEditingNote ? `${sanitizedNote}${INLINE_EDIT_CURSOR}` : sanitizedNote.trim();
-	const fullInlineLabel = `${labelPrefix}${rawInlineNote}`;
+	const inlineNote = isEditingNote ? `${sanitizedNote}${INLINE_EDIT_CURSOR}` : sanitizedNote.trim();
+	const inlineLabel = `${labelPrefix}${inlineNote}`;
 
 	if (maxInlineLabelLength == null) {
-		return fullInlineLabel;
+		return inlineLabel;
 	}
 
 	return isEditingNote
-		? truncateTextKeepingTail(fullInlineLabel, maxInlineLabelLength)
-		: truncateTextKeepingHead(fullInlineLabel, maxInlineLabelLength);
+		? truncateTextKeepingTail(inlineLabel, maxInlineLabelLength)
+		: truncateTextKeepingHead(inlineLabel, maxInlineLabelLength);
+}
+
+export function buildWrappedOptionLabelWithInlineNote(
+	baseOptionLabel: string,
+	rawNote: string,
+	isEditingNote: boolean,
+	maxInlineLabelLength: number,
+	wrapPadding = INLINE_NOTE_WRAP_PADDING,
+): string[] {
+	const inlineLabel = buildOptionLabelWithInlineNote(baseOptionLabel, rawNote, isEditingNote);
+	const sanitizedWrapPadding = Number.isFinite(wrapPadding) ? Math.max(0, Math.floor(wrapPadding)) : 0;
+	const sanitizedMaxInlineLabelLength = Number.isFinite(maxInlineLabelLength)
+		? Math.max(1, Math.floor(maxInlineLabelLength))
+		: 1;
+	const wrapWidth = Math.max(1, sanitizedMaxInlineLabelLength - sanitizedWrapPadding);
+	const wrappedLines = wrapTextWithAnsi(inlineLabel, wrapWidth);
+	return wrappedLines.length > 0 ? wrappedLines : [""];
 }

package/src/ask-inline-ui.ts

@@ -1,5 +1,5 @@
 import type { ExtensionUIContext } from "@mariozechner/pi-coding-agent";
-import { Editor, type EditorTheme, Key, matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
+import { Editor, type EditorTheme, Key, matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import {
 	OTHER_OPTION,
 	appendRecommendedTagToOptionLabels,
@@ -7,7 +7,7 @@ import {
 	type AskOption,
 	type AskSelection,
 } from "./ask-logic";
-import { buildOptionLabelWithInlineNote } from "./ask-inline-note";
+import { INLINE_NOTE_WRAP_PADDING, buildWrappedOptionLabelWithInlineNote } from "./ask-inline-note";
 
 interface SingleQuestionInput {
 	question: string;
@@ -115,21 +115,28 @@ export async function askSingleQuestionWithInlineNote(
 			addLine(theme.fg("text", ` ${questionInput.question}`));
 			renderedLines.push("");
 
-			const maxInlineLabelLength = Math.max(12, width - 6);
 			for (let optionIndex = 0; optionIndex < selectableOptionLabels.length; optionIndex++) {
 				const optionLabel = selectableOptionLabels[optionIndex];
 				const isCursorOption = optionIndex === cursorOptionIndex;
 				const isEditingThisOption = isNoteEditorOpen && isCursorOption;
-				const optionLabelWithInlineNote = buildOptionLabelWithInlineNote(
+				const cursorPrefixText = isCursorOption ? "→ " : "  ";
+				const cursorPrefix = isCursorOption ? theme.fg("accent", cursorPrefixText) : cursorPrefixText;
+				const bullet = isCursorOption ? "●" : "○";
+				const markerText = `${bullet} `;
+				const optionColor = isCursorOption ? "accent" : "text";
+				const prefixWidth = visibleWidth(cursorPrefixText) + visibleWidth(markerText);
+				const wrappedInlineLabelLines = buildWrappedOptionLabelWithInlineNote(
 					optionLabel,
 					getRawNoteForOption(optionIndex),
 					isEditingThisOption,
-					maxInlineLabelLength,
+					Math.max(1, width - prefixWidth),
+					INLINE_NOTE_WRAP_PADDING,
 				);
-				const cursorPrefix = isCursorOption ? theme.fg("accent", "→ ") : "  ";
-				const bullet = isCursorOption ? "●" : "○";
-				const optionColor = isCursorOption ? "accent" : "text";
-				addLine(`${cursorPrefix}${theme.fg(optionColor, `${bullet} ${optionLabelWithInlineNote}`)}`);
+				const continuationPrefix = " ".repeat(prefixWidth);
+				addLine(`${cursorPrefix}${theme.fg(optionColor, `${markerText}${wrappedInlineLabelLines[0] ?? ""}`)}`);
+				for (const wrappedLine of wrappedInlineLabelLines.slice(1)) {
+					addLine(`${continuationPrefix}${theme.fg(optionColor, wrappedLine)}`);
+				}
 			}
 
 			renderedLines.push("");

package/src/ask-tabs-ui.ts

@@ -1,5 +1,5 @@
 import type { ExtensionUIContext } from "@mariozechner/pi-coding-agent";
-import { Editor, type EditorTheme, Key, matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
+import { Editor, type EditorTheme, Key, matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import {
 	OTHER_OPTION,
 	appendRecommendedTagToOptionLabels,
@@ -8,7 +8,7 @@ import {
 	type AskQuestion,
 	type AskSelection,
 } from "./ask-logic";
-import { buildOptionLabelWithInlineNote } from "./ask-inline-note";
+import { INLINE_NOTE_WRAP_PADDING, buildWrappedOptionLabelWithInlineNote } from "./ask-inline-note";
 
 interface PreparedQuestion {
 	id: string;
@@ -317,27 +317,29 @@ export async function askQuestionsWithTabs(
 			addLine(theme.fg("text", ` ${preparedQuestion.question}`));
 			renderedLines.push("");
 
-			const maxInlineLabelLength = Math.max(12, width - 8);
 			for (let optionIndex = 0; optionIndex < preparedQuestion.options.length; optionIndex++) {
 				const optionLabel = preparedQuestion.options[optionIndex];
 				const isCursorOption = optionIndex === cursorOptionIndex;
 				const isOptionSelected = selectedOptionIndexes.includes(optionIndex);
 				const isEditingThisOption = isNoteEditorOpen && isCursorOption;
-				const optionLabelWithInlineNote = buildOptionLabelWithInlineNote(
+				const cursorPrefixText = isCursorOption ? "→ " : "  ";
+				const cursorPrefix = isCursorOption ? theme.fg("accent", cursorPrefixText) : cursorPrefixText;
+				const markerText = preparedQuestion.multi
+					? `${isOptionSelected ? "[x]" : "[ ]"} `
+					: `${isOptionSelected ? "●" : "○"} `;
+				const optionColor = isCursorOption ? "accent" : isOptionSelected ? "success" : "text";
+				const prefixWidth = visibleWidth(cursorPrefixText) + visibleWidth(markerText);
+				const wrappedInlineLabelLines = buildWrappedOptionLabelWithInlineNote(
 					optionLabel,
 					getQuestionNote(questionIndex, optionIndex),
 					isEditingThisOption,
-					maxInlineLabelLength,
+					Math.max(1, width - prefixWidth),
+					INLINE_NOTE_WRAP_PADDING,
 				);
-				const cursorPrefix = isCursorOption ? theme.fg("accent", "→ ") : "  ";
-				if (preparedQuestion.multi) {
-					const checkbox = isOptionSelected ? "[x]" : "[ ]";
-					const optionColor = isCursorOption ? "accent" : isOptionSelected ? "success" : "text";
-					addLine(`${cursorPrefix}${theme.fg(optionColor, `${checkbox} ${optionLabelWithInlineNote}`)}`);
-				} else {
-					const bullet = isOptionSelected ? "●" : "○";
-					const optionColor = isCursorOption ? "accent" : isOptionSelected ? "success" : "text";
-					addLine(`${cursorPrefix}${theme.fg(optionColor, `${bullet} ${optionLabelWithInlineNote}`)}`);
+				const continuationPrefix = " ".repeat(prefixWidth);
+				addLine(`${cursorPrefix}${theme.fg(optionColor, `${markerText}${wrappedInlineLabelLines[0] ?? ""}`)}`);
+				for (const wrappedLine of wrappedInlineLabelLines.slice(1)) {
+					addLine(`${continuationPrefix}${theme.fg(optionColor, wrappedLine)}`);
 				}
 			}