@hank-warren/pi-ask-user-question 0.2.1 → 0.2.2

package/ask-user-question.ts

@@ -99,7 +99,24 @@ export function registerTool(pi: ExtensionAPI): void {
 							done,
 							requestRender: () => tui.requestRender(),
 						}),
-					{ overlay: true },
+					{
+						overlay: true,
+						// Bottom-anchored and full width, so the questionnaire sits
+						// directly above the input dock instead of floating over the
+						// middle of the transcript. Mirrors the geometry
+						// @juicesharp/rpiv-ask-user-question used.
+						//
+						// width MUST stay "100%" in step with the dialog rendering full
+						// width: pi composites only the columns the component emits, so
+						// a narrower box inside a full-width overlay region would let
+						// the transcript show through beside it.
+						overlayOptions: {
+							anchor: "bottom-center",
+							width: "100%",
+							maxHeight: "100%",
+							margin: { left: 0, right: 0, bottom: 0 },
+						},
+					},
 				);
 
 				// `custom()` resolving undefined means the host reported hasUI but

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hank-warren/pi-ask-user-question",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Structured questionnaire tool for Pi with numbered options, digit hotkeys and Tab-to-comment, composed from the shared permission-selector component.",
   "type": "module",
   "keywords": [

package/view/dialog.ts

@@ -18,6 +18,9 @@
  *    overlay onto the chat line by line and only overwrites the columns the
  *    overlay actually emits; short lines let chat text show through and the
  *    dialog renders as garbage interleaved with the transcript.
+ * 3. ALWAYS clamp lines to the inner width. A single over-long line breaks the
+ *    right border and spills into the transcript, so `render` truncates as a
+ *    last-resort invariant no matter what any content source produces.
  */
 
 import {
@@ -27,7 +30,13 @@ import {
 	isPrintable,
 } from "@hank-warren/pi-permission-selector/keys.ts";
 import { OptionSelector, type SelectorOption } from "@hank-warren/pi-permission-selector/selector.ts";
-import { CURSOR_MARKER, decodeKittyPrintable, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import {
+	CURSOR_MARKER,
+	decodeKittyPrintable,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
 import type { QuestionnaireSession } from "../questionnaire.ts";
 import type { QuestionnaireResult } from "../tool/schema.ts";
 
@@ -42,13 +51,18 @@ export interface DialogOptions {
 	/** Called exactly once with the final outcome. */
 	done(result: QuestionnaireResult): void;
 	requestRender?(): void;
-	/** Overlay width cap. Defaults to 84 columns. */
+	/**
+	 * Optional width cap. Unset means fill the overlay, which is what the
+	 * bottom-anchored `width: "100%"` overlay wants: a narrower box would let
+	 * the transcript show through to its right.
+	 */
 	maxWidth?: number;
 }
 
-const DEFAULT_MAX_WIDTH = 84;
 /** Left/right border plus one space of padding on each side. */
 const CHROME_COLUMNS = 4;
+/** Indent for the custom-answer field, in columns. */
+const FIELD_INDENT = "  ";
 
 export class QuestionnaireDialog {
 	/** Focusable — set by the TUI when focus changes. Drives CURSOR_MARKER. */
@@ -139,11 +153,19 @@ export class QuestionnaireDialog {
 		lines.push("");
 
 		if (this.customText !== undefined) {
+			// Wrap the typed answer. Without this a long answer ran past the right
+			// border and off the screen forever, because an input field renders as
+			// one line unless something breaks it up.
+			const avail = Math.max(1, inner - FIELD_INDENT.length - 1); // -1 reserves the caret cell
+			const wrapped = wrapTextWithAnsi(this.customText, avail);
 			// CURSOR_MARKER is a zero-width APC sequence: the TUI strips it and
 			// parks the hardware cursor there, so the caret lands in the field
 			// instead of at the bottom of the screen.
-			const caret = this.focused ? CURSOR_MARKER : "";
-			lines.push(`  ${this.customText}${caret}▌`);
+			const caret = `${this.focused ? CURSOR_MARKER : ""}▌`;
+			for (let i = 0; i < wrapped.length; i++) {
+				const last = i === wrapped.length - 1;
+				lines.push(`${FIELD_INDENT}${wrapped[i]}${last ? caret : ""}`);
+			}
 			lines.push("");
 			lines.push(this.style("dim", "  enter submit · esc back to options"));
 			return lines;
@@ -154,14 +176,18 @@ export class QuestionnaireDialog {
 	}
 
 	render(width: number): string[] {
-		const outer = Math.max(20, Math.min(width, this.opts.maxWidth ?? DEFAULT_MAX_WIDTH));
+		const cap = this.opts.maxWidth ?? width;
+		const outer = Math.max(20, Math.min(width, cap));
 		const inner = outer - CHROME_COLUMNS;
 		const border = (text: string) => this.style("dim", text);
 
 		const out: string[] = [border(`┌${"─".repeat(outer - 2)}┐`)];
-		for (const line of this.contentLines(inner)) {
-			// Pad to the full inner width. Without this, pi's overlay compositing
-			// leaves the underlying chat text visible to the right of each line.
+		for (const raw of this.contentLines(inner)) {
+			// Invariant (3): never let a line break the right border, whatever
+			// produced it.
+			const line = visibleWidth(raw) > inner ? truncateToWidth(raw, inner) : raw;
+			// Invariant (2): pad to the full inner width, or pi's overlay
+			// compositing leaves chat text visible to the right of each line.
 			const pad = Math.max(0, inner - visibleWidth(line));
 			out.push(`${border("│")} ${line}${" ".repeat(pad)} ${border("│")}`);
 		}