@oh-my-pi/pi-tui 18.13.0 → 18.13.2

package/src/overlays/ask-dialog.ts

@@ -51,6 +51,8 @@ export interface ExtensionAskDialogResultItem {
 	customInputImages?: ImageContent[];
 	note?: string;
 	noteImages?: ImageContent[];
+	/** Label of the option the note is on; unset when it is on the custom answer. */
+	noteOption?: string;
 	timedOut?: boolean;
 }
 
@@ -145,14 +147,21 @@ interface AskDialogCallbacks {
 	): Promise<AskDialogPromptValue | undefined>;
 }
 
+/**
+ * Routes typing to a composer draft that was in progress when the dialog
+ * opened, so in-flight keystrokes never answer by accident. The up/down select
+ * keys are the explicit hand-off: they release the guard for the rest of the
+ * dialog's life and the draft stays parked (intact) beneath it.
+ */
 interface AskDialogInputGuard {
 	isBlocked(): boolean;
 	handleInput(keyData: string): void;
+	/** Shown after the release keys while the guard holds input. */
 	hint: string;
 	/** Mirror the guard's blocked state onto the proxied draft surface each
 	 *  render, so a draft that owns input shows a visible insertion cursor even
-	 *  though this dialog holds TUI focus. */
-	syncPresentation?(): void;
+	 *  though this dialog holds TUI focus, and drops it once the dialog takes over. */
+	syncPresentation?(blocked: boolean): void;
 }
 
 interface AskDialogOptions {
@@ -404,7 +413,7 @@ function describeAnswer(question: ExtensionAskDialogQuestion, state: QuestionSta
 			push(optionLabelSpans(question, index, labels[index] ?? option.label));
 	});
 	if (state.customInput !== undefined) push([span(`“${normalizedInlineInput(state.customInput)}”`)]);
-	const note = noteForSubmittedAnswer(question, state)?.trim();
+	const note = noteForSubmittedAnswer(question, state)?.text.trim();
 	if (note) spans.push(span("  ✎ ", "dim"), span(normalizedInlineInput(note), "em"));
 	return spans;
 }
@@ -448,13 +457,17 @@ function clearNoteUnlessRow(state: QuestionState, rowKey: string): void {
 	if (state.noteRowKey !== undefined && state.noteRowKey !== rowKey) clearNote(state);
 }
 
-function noteForSubmittedAnswer(question: ExtensionAskDialogQuestion, state: QuestionState): string | undefined {
+/** The note that goes out with the answer (its row is part of it), and the option it is on (unset for Other). */
+function noteForSubmittedAnswer(
+	question: ExtensionAskDialogQuestion,
+	state: QuestionState,
+): { text: string; option?: string } | undefined {
 	if (state.note === undefined || state.noteRowKey === undefined) return undefined;
-	if (state.noteRowKey === "other") return state.customInput !== undefined ? state.note : undefined;
+	if (state.noteRowKey === "other") return state.customInput !== undefined ? { text: state.note } : undefined;
 	const match = /^option:(\d+)$/.exec(state.noteRowKey);
 	const optionIndex = match?.[1] === undefined ? Number.NaN : Number.parseInt(match[1], 10);
 	const option = Number.isInteger(optionIndex) ? question.options[optionIndex] : undefined;
-	return option && state.selectedOptions.has(option.label) ? state.note : undefined;
+	return option && state.selectedOptions.has(option.label) ? { text: state.note, option: option.label } : undefined;
 }
 
 function renderRowLabel(
@@ -581,10 +594,18 @@ export class AskDialogComponent implements Component {
 	#native: NativeNode | undefined;
 	/** Input-guard blocked state {@link #native} was described with (the guard flips outside this dialog). */
 	#nativeBlocked = false;
+	/** Set once the user explicitly takes the dialog (up/down, or a pointer action) while a draft held input. */
+	#guardReleased = false;
 	/** When the countdown runs out (epoch ms), for the native ring. */
 	#countdownDeadline = 0;
 	/** Once-a-second re-describe while the native countdown ring is shown. */
 	#ringTick: NodeJS.Timeout | undefined;
+	/**
+	 * The answer whose pick just moved the dialog on to the next question. Note annotates it, not the
+	 * next question's highlighted row, until that question is answered or any other input arrives:
+	 * a Tern click commits a single-choice row, so picking then pressing Note is the mouse flow.
+	 */
+	#justAnswered: { questionIndex: number; rowKey: string } | undefined;
 	readonly #panel: OverlayPanel;
 	readonly #headerRegion: PanelRows;
 	readonly #bodyRegion: PanelRows;
@@ -682,6 +703,7 @@ export class AskDialogComponent implements Component {
 		// closed/prompt guards, matching HookSelector/HookInput semantics.
 		this.#countdown?.reset();
 		this.#native = undefined;
+		if (keyData !== "n" && keyData !== "N") this.#justAnswered = undefined;
 		if (matchesSelectCancel(keyData)) {
 			this.#finishCancel();
 			return;
@@ -696,9 +718,15 @@ export class AskDialogComponent implements Component {
 			this.toggleQuestionExpansion();
 			return;
 		}
-		const inputGuard = this.options.inputGuard;
-		if (inputGuard?.isBlocked()) {
-			inputGuard.handleInput(keyData);
+		if (this.#guardBlocks()) {
+			if (
+				getKeybindings().matches(keyData, "tui.select.up") ||
+				getKeybindings().matches(keyData, "tui.select.down")
+			) {
+				this.#releaseGuard();
+				return;
+			}
+			this.options.inputGuard?.handleInput(keyData);
 			this.#requestRender();
 			return;
 		}
@@ -723,7 +751,7 @@ export class AskDialogComponent implements Component {
 		// Keep the proxied draft's cursor visible while it owns input (the editor
 		// renders as the next sibling in the same container, so this lands in the
 		// same frame).
-		this.options.inputGuard?.syncPresentation?.();
+		this.options.inputGuard?.syncPresentation?.(this.#guardBlocks());
 		if (this.#hidden) return this.#renderHidden(width);
 		const innerWidth = Math.max(1, width - 4);
 		this.#contentWidth = innerWidth;
@@ -768,10 +796,9 @@ export class AskDialogComponent implements Component {
 	 * countdown, Hide, then Note, Skip and the primary Submit/Next).
 	 */
 	describe(cx: DescribeContext): NativeNode {
-		const inputGuard = this.options.inputGuard;
 		// Same draft-cursor mirroring as render(): the proxied draft describes itself next to this dialog.
-		inputGuard?.syncPresentation?.();
-		const blocked = inputGuard?.isBlocked() ?? false;
+		const blocked = this.#guardBlocks();
+		this.options.inputGuard?.syncPresentation?.(blocked);
 		const ring = this.#countdown !== undefined && cx.supports("meter");
 		if (ring) this.#startRingTick();
 		if (this.#native && this.#nativeBlocked === blocked) return this.#native;
@@ -985,7 +1012,7 @@ export class AskDialogComponent implements Component {
 		if (blocked && inputGuard) {
 			return actionBar([
 				...lead,
-				text([span(plainText(inputGuard.hint), "muted")], { truncate: "end", role: "omp.ask.summary" }),
+				text([span(plainText(this.#guardHint(inputGuard)), "muted")], { truncate: "end", role: "omp.ask.summary" }),
 				skip,
 			]);
 		}
@@ -1006,7 +1033,10 @@ export class AskDialogComponent implements Component {
 			tone: "accent",
 			title: question?.multi ? `${enterLabel}  enter · Toggle  space` : `${enterLabel}  enter`,
 		});
-		const note = actionButton("Note", "note", { keys: "n", title: "Add a note to the highlighted answer  n" });
+		const note = actionButton("Note", "note", {
+			keys: "n",
+			title: "Add a note to the highlighted answer, or to the one just picked  n",
+		});
 		return actionBar([...lead, null, note, skip, submit]);
 	}
 
@@ -1014,11 +1044,12 @@ export class AskDialogComponent implements Component {
 	 * Pointer actions: a tab click switches to it; a click on an answer row is
 	 * Enter on it (Space for a multi-select option, so it toggles; its
 	 * double-click `activate` is Enter); the action bar's Submit, Note and Skip
-	 * run exactly what Enter, `n` and Esc run on the highlighted row; Hide/Show
+	 * run what Enter (see {@link #pressEnter} for Other), `n` and Esc run on the highlighted row; Hide/Show
 	 * collapse and restore the dialog.
 	 */
 	handleNativeEvent(event: NativeUiEvent): void {
 		if (this.#closed || this.#promptActive) return;
+		if (event.type !== "action" || event.act !== "note") this.#justAnswered = undefined;
 		if (event.type === "action") {
 			if (event.act === "cancel") {
 				this.#finishCancel();
@@ -1028,13 +1059,16 @@ export class AskDialogComponent implements Component {
 				this.#setHidden(event.act === "hide");
 				return;
 			}
-			if (this.#hidden || this.options.inputGuard?.isBlocked()) return;
+			if (this.#hidden) return;
+			// A pointer action on the dialog is an explicit hand-off from the draft.
+			this.#releaseGuardForPointer();
 			if (event.act === "submit") this.#pressEnter();
 			else if (event.act === "note") this.#pressNote();
 			return;
 		}
 		if (event.type !== "select" && event.type !== "activate") return;
-		if (this.#hidden || this.options.inputGuard?.isBlocked()) return;
+		if (this.#hidden) return;
+		this.#releaseGuardForPointer();
 		const key = leafKey(event.key);
 		if (key === "tabs") {
 			if (!this.#hasSubmitTab()) return;
@@ -1062,7 +1096,13 @@ export class AskDialogComponent implements Component {
 		this.#requestRender();
 	}
 
-	/** Enter: submit on the Review tab, else commit the highlighted row. */
+	/**
+	 * The action bar's Submit/Next: submit on the Review tab, else commit the highlighted row —
+	 * except Other, whose row (click or Enter) already opens the editor. Reopening it here trapped a
+	 * cancelled Other: Next kept bringing the editor back instead of moving on. With a Review tab to
+	 * land on, Next keeps any custom answer and moves on; a lone single-select question has nowhere
+	 * to go but submitting nothing, so it still asks.
+	 */
 	#pressEnter(): void {
 		this.#countdown?.reset();
 		if (this.#isSubmitTab()) {
@@ -1072,18 +1112,38 @@ export class AskDialogComponent implements Component {
 		const active = this.#activeQuestionState();
 		const rowItem = active ? this.#questionRows(active.question)[active.state.cursorIndex] : undefined;
 		if (!active || !rowItem) return;
+		if (rowItem.kind === "other" && this.#hasSubmitTab()) {
+			this.#advanceAfterQuestion(active.state.customInput === undefined ? undefined : rowItem.key);
+			return;
+		}
 		this.#commitRow(active.question, active.state, rowItem, true);
 		this.#requestRender();
 	}
 
-	/** `n`: a note on the highlighted row (questions only). */
+	/** `n`: a note on the {@link #noteTarget} row (questions only). */
 	#pressNote(): void {
 		if (this.#isSubmitTab()) return;
 		this.#countdown?.reset();
+		const target = this.#noteTarget();
+		if (target) void this.#promptForNote(target.question, target.state, target.rowItem);
+	}
+
+	/**
+	 * The row a note goes to: the answer just picked while the question it moved on to is still
+	 * unanswered, else the highlighted row.
+	 */
+	#noteTarget(): { question: ExtensionAskDialogQuestion; state: QuestionState; rowItem: QuestionRow } | undefined {
 		const active = this.#activeQuestionState();
-		const rowItem = active ? this.#questionRows(active.question)[active.state.cursorIndex] : undefined;
-		if (!active || !rowItem) return;
-		void this.#promptForNote(active.question, active.state, rowItem);
+		if (!active) return undefined;
+		const last = this.#justAnswered;
+		if (last && last.questionIndex !== this.#currentQuestionIndex() && !isAnswered(active.state)) {
+			const question = this.#questions[last.questionIndex];
+			const state = this.#states[last.questionIndex];
+			const rowItem = question ? this.#questionRows(question).find(row => row.key === last.rowKey) : undefined;
+			if (question && state && rowItem) return { question, state, rowItem };
+		}
+		const rowItem = this.#questionRows(active.question)[active.state.cursorIndex];
+		return rowItem ? { question: active.question, state: active.state, rowItem } : undefined;
 	}
 
 	/** Re-describe once a second while a countdown ring is shown (the ring's value is data, not a terminal clock). */
@@ -1169,16 +1229,39 @@ export class AskDialogComponent implements Component {
 		this.#requestRender();
 	}
 
+	/** True while a draft that predates the dialog still owns typing. */
+	#guardBlocks(): boolean {
+		return !this.#guardReleased && (this.options.inputGuard?.isBlocked() ?? false);
+	}
+
+	/** Up/down hand the keyboard to the dialog for good; the draft stays untouched beneath it. */
+	#releaseGuard(): void {
+		this.#guardReleased = true;
+		this.#native = undefined;
+		this.#hidden = false;
+		this.#requestRender();
+	}
+
+	#releaseGuardForPointer(): void {
+		if (!this.#guardBlocks()) return;
+		this.#guardReleased = true;
+		this.#native = undefined;
+	}
+
+	#guardHint(inputGuard: AskDialogInputGuard): string {
+		return `${editorKeys("tui.select.up", "tui.select.down")} answer · ${inputGuard.hint}`;
+	}
+
 	/** Hidden: one line in the composer's place — title (with countdown), the question clipped to fit, and how to bring it back. */
 	#renderHidden(width: number): readonly string[] {
 		const hideKey = editorKey("app.ask.hide");
 		const enter = formatKeyHint("enter");
 		const inputGuard = this.options.inputGuard;
-		const blocked = inputGuard?.isBlocked() ?? false;
+		const blocked = this.#guardBlocks();
 		// While a draft owns input, Enter goes to the draft, so only the hide key restores.
 		const show = blocked ? hideKey : hideKey ? `${hideKey}/${enter}` : enter;
 		const hints: string[] = [];
-		if (blocked && inputGuard) hints.push(inputGuard.hint);
+		if (blocked && inputGuard) hints.push(this.#guardHint(inputGuard));
 		if (show) hints.push(`${show} show`);
 		hints.push(`${editorKey("tui.select.cancel")} cancel`);
 		const hint = theme.fg("dim", ` · ${hints.join(" · ")}`);
@@ -1262,7 +1345,7 @@ export class AskDialogComponent implements Component {
 		const enter = formatKeyHint("enter");
 		const upDown = editorKeys("tui.select.up", "tui.select.down");
 		const inputGuard = this.options.inputGuard;
-		if (inputGuard?.isBlocked()) return `${inputGuard.hint}${this.#expandHint()} · ${cancel}`;
+		if (inputGuard && this.#guardBlocks()) return `${this.#guardHint(inputGuard)}${this.#expandHint()} · ${cancel}`;
 		if (this.#isSubmitTab()) {
 			const scroll = indicator ? ` ${indicator} scroll ·` : "";
 			return `${enter} submit · ${upDown} scroll ·${scroll} ${cancel}`;
@@ -1334,9 +1417,7 @@ export class AskDialogComponent implements Component {
 		const rowItem = rows[state.cursorIndex];
 		if (!rowItem) return;
 		if (keyData === "n" || keyData === "N") {
-			if (rowItem.kind === "option" || rowItem.kind === "other") {
-				void this.#promptForNote(question, state, rowItem);
-			}
+			this.#pressNote();
 			return;
 		}
 		const isEnter = matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n";
@@ -1364,7 +1445,7 @@ export class AskDialogComponent implements Component {
 				// focused option; Space toggles. Advances to the next question
 				// (submitting only for a single-question dialog), matching
 				// single-select Enter (#8252).
-				this.#advanceAfterQuestion();
+				this.#advanceAfterQuestion(state.selectedOptions.has(option.label) ? rowItem.key : undefined);
 				return;
 			}
 			if (state.selectedOptions.has(option.label)) {
@@ -1380,7 +1461,7 @@ export class AskDialogComponent implements Component {
 		state.customInput = undefined;
 		state.customInputImages = undefined;
 		clearNoteUnlessRow(state, rowItem.key);
-		this.#advanceAfterQuestion();
+		this.#advanceAfterQuestion(rowItem.key);
 	}
 
 	#handleSubmitTabInput(keyData: string): void {
@@ -1405,8 +1486,13 @@ export class AskDialogComponent implements Component {
 		this.#submitScrollOffset = 0;
 	}
 
-	#advanceAfterQuestion(): void {
+	/** Move past the current question; `answeredRowKey` is the row whose pick did it, for {@link #noteTarget}. */
+	#advanceAfterQuestion(answeredRowKey?: string): void {
 		const current = this.#currentQuestionIndex();
+		this.#justAnswered =
+			answeredRowKey !== undefined && this.#questions.length > 1
+				? { questionIndex: current, rowKey: answeredRowKey }
+				: undefined;
 		if (this.#questions.length === 1) {
 			this.#finishSubmit();
 			return;
@@ -1458,7 +1544,7 @@ export class AskDialogComponent implements Component {
 				this.#activeTabIndex = this.#submitTabIndex();
 				this.#submitScrollOffset = 0;
 			} else {
-				this.#advanceAfterQuestion();
+				this.#advanceAfterQuestion(rowItem.key);
 			}
 		} finally {
 			this.#promptActive = false;
@@ -1590,7 +1676,7 @@ export class AskDialogComponent implements Component {
 			const label = questionTabLabel(question, index);
 			const answer = renderAnswerSummary(question, state);
 			allLines.push(`${theme.fg("dim", `${index + 1}. ${label}:`)} ${answer}`);
-			const submittedNote = noteForSubmittedAnswer(question, state);
+			const submittedNote = noteForSubmittedAnswer(question, state)?.text;
 			if (submittedNote?.trim()) {
 				const note = normalizedInlineInput(submittedNote);
 				allLines.push(
@@ -1724,8 +1810,9 @@ export class AskDialogComponent implements Component {
 				selectedOptions,
 				customInput: state.customInput,
 				customInputImages: state.customInputImages,
-				note,
+				note: note?.text,
 				noteImages: note === undefined ? undefined : state.noteImages,
+				noteOption: note?.option,
 				timedOut: state.timedOut || undefined,
 			});
 		}

package/src/overlays/context-viewer-format.ts

@@ -0,0 +1,145 @@
+/**
+ * Display text for context entries. Each header has an ANSI-string form (`render`)
+ * and a span form (`describe`); keep the twins visually identical.
+ */
+import { sanitizeText } from "@oh-my-pi/pi-utils";
+import type { TspSpan } from "@oh-my-pi/pi-wire";
+import { CONTEXT_PRESENTATION } from "../chrome/context-presentation";
+import type { ContextCategoryId, ContextThinkingGroup, ContextViewEntry } from "../chrome/context-view-model";
+import { editorKey } from "../chrome/keybinding-hints";
+import { span } from "../native/describe";
+import { PREVIEW_LIMITS, replaceTabs, shortenEmbeddedPaths, shortenPath } from "../render/render-utils";
+import { theme } from "../theme/theme";
+import { wrapTextWithAnsi } from "../utils";
+
+const TIMESTAMP_FORMAT = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+	hour: "2-digit",
+	minute: "2-digit",
+} as const;
+
+/** Normalized newlines, control characters removed, tabs expanded. */
+export function safeContent(value: string): string {
+	return replaceTabs(sanitizeText(value.replace(/\r\n?/g, "\n")));
+}
+
+/** {@link safeContent} with embedded home paths shortened, for labels and metadata. */
+export function safeText(value: string): string {
+	return shortenEmbeddedPaths(safeContent(value));
+}
+
+/** {@link safeText} collapsed to one row. */
+export function safeLine(value: string): string {
+	return safeText(value).replace(/\n/g, " ");
+}
+
+/** Token label of an entry or group: `—` for a grouped entry, `N/A · Interrupted`, else `N token(s)` (unscaled estimate). */
+export function tokenEstimate(item: ContextViewEntry | ContextThinkingGroup): string {
+	// A grouped entry shares its group's estimate, which the group heading shows.
+	if ("thinkingGroup" in item && item.thinkingGroup) return "—";
+	if (item.interrupted) return "N/A · Interrupted";
+	return `${item.tokens.toLocaleString("en-US")} ${item.tokens === 1 ? "token" : "tokens"}`;
+}
+
+/** `[label] N tokens` as ANSI. */
+export function entryHeaderLine(entry: ContextViewEntry, category: ContextCategoryId): string {
+	const color = CONTEXT_PRESENTATION[category].color;
+	return (
+		theme.fg("dim", "[") +
+		theme.fg(color, theme.bold(safeLine(entry.label))) +
+		theme.fg("dim", `] ${tokenEstimate(entry)}`)
+	);
+}
+
+/** `[label] N tokens` as spans. */
+export function entryHeaderSpans(entry: ContextViewEntry, category: ContextCategoryId): TspSpan[] {
+	const color = CONTEXT_PRESENTATION[category].color;
+	return [span("[", "dim"), span(safeLine(entry.label), `${color} strong`), span(`] ${tokenEstimate(entry)}`, "dim")];
+}
+
+/** Heading for a shared thinking group: label plus its token estimate. */
+export function groupHeaderLine(group: ContextThinkingGroup, category: ContextCategoryId): string {
+	const color = CONTEXT_PRESENTATION[category].color;
+	return theme.fg(color, theme.bold(safeLine(group.label))) + theme.fg("dim", ` · ${tokenEstimate(group)}`);
+}
+
+/** Truncation marker under a preview; the selected preview also advertises the open key. */
+export function previewHint(selected: boolean): string {
+	const confirm = selected ? editorKey("tui.select.confirm") : "";
+	return (
+		theme.fg("dim", "  … more") +
+		(confirm ? theme.fg("dim", " · ") + theme.fg("accent", `${confirm} View Content`) : "")
+	);
+}
+
+/**
+ * Metadata rows: info and path, call id, timestamp. The full-content view also
+ * lists the thinking group, which previews show as a shared heading instead.
+ */
+export function entryMetadata(
+	entry: ContextViewEntry,
+	options: { hour12: boolean | undefined; withGroup: boolean },
+): string[] {
+	const lines: string[] = [];
+	const group = entry.thinkingGroup;
+	if (group && options.withGroup) lines.push(`${safeLine(group.label)} · ${tokenEstimate(group)}`);
+	const info = safeText([entry.info, entry.path ? shortenPath(entry.path) : undefined].filter(Boolean).join(" · "));
+	if (info) lines.push(info);
+	const callId = entry.callId !== undefined ? safeText(entry.callId) : "";
+	if (callId) lines.push(callId);
+	if (entry.timestamp !== undefined)
+		lines.push(new Date(entry.timestamp).toLocaleString([], { ...TIMESTAMP_FORMAT, hour12: options.hour12 }));
+	return lines;
+}
+
+/** Preview row budget for a list of `height` rows: room for the entry heading, hint, and group heading. */
+export function previewRows(entry: ContextViewEntry, height: number): number {
+	const reserved = entry.thinkingGroup ? 3 : 2;
+	return Math.max(1, Math.min(PREVIEW_LIMITS.OUTPUT_EXPANDED, height - reserved));
+}
+
+export interface EntryPreviewOptions {
+	/** Wrap width of preview rows. */
+	readonly width: number;
+	/** Maximum preview rows. */
+	readonly rows: number;
+	/** Viewport width; bounds the source read to `sourceWidth × rows × 2` characters before sanitizing and wrapping. */
+	readonly sourceWidth: number;
+	readonly hour12: boolean | undefined;
+}
+
+/** Dim metadata rows, then the indented body, cut to `rows`; `complete` is false when anything was omitted. */
+export function entryPreview(
+	entry: ContextViewEntry,
+	options: EntryPreviewOptions,
+): { lines: string[]; complete: boolean } {
+	const { width, rows } = options;
+	const maxChars = Math.max(1, options.sourceWidth) * rows * 2;
+	const metadata = entryMetadata(entry, { hour12: options.hour12, withGroup: false }).join("\n");
+	const metadataLength = Math.min(metadata.length, maxChars);
+	// Providers often end thinking and tool output with newlines; they render as empty rows.
+	const body = entry.text.trimEnd();
+	const bodyLength = Math.min(body.length, Math.max(0, maxChars - metadataLength - (metadataLength ? 1 : 0)));
+	const parts = [
+		{
+			value: safeContent(metadata.slice(0, metadataLength)),
+			prefix: "",
+			style: (line: string) => theme.fg("dim", line),
+		},
+		{ value: safeContent(body.slice(0, bodyLength)), prefix: "  ", style: (line: string) => line },
+	];
+	const lines: string[] = [];
+	for (const { value, prefix, style } of parts) {
+		if (!value) continue;
+		for (const paragraph of value.split("\n")) {
+			const remaining = rows - lines.length;
+			if (remaining === 0) return { lines, complete: false };
+			const wrapped = paragraph ? wrapTextWithAnsi(style(paragraph), Math.max(1, width - prefix.length)) : [""];
+			lines.push(...wrapped.slice(0, remaining).map(line => `${prefix}${line}`));
+			if (wrapped.length > remaining) return { lines, complete: false };
+		}
+	}
+	return { lines, complete: metadataLength === metadata.length && bodyLength === body.length };
+}