@hank-warren/pi-ask-user-question 0.2.0 → 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.0",
+  "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

@@ -5,16 +5,38 @@
  * NO MONKEY PATCHING. The numbered options, digit hotkeys and Tab-to-comment
  * come from `OptionSelector`, imported from the PUBLISHED sibling package
  * `@hank-warren/pi-permission-selector` (plain `dependencies`, never
- * `bundledDependencies` — AGENTS.md §Structure). That is the whole point of
- * the design: shared behavior by composition, not by patching pi internals.
- * See docs/specs/pi-ask-user-question.md §9.
+ * `bundledDependencies` — AGENTS.md §Structure). See
+ * docs/specs/pi-ask-user-question.md §9.
  *
- * v0.1 renders one question. The component is written against the session
- * rather than a single question so v0.2 can advance in place without a
- * rewrite.
+ * TWO RULES, both learned from v0.2.0 shipping broken:
+ *
+ * 1. NEVER compare key data with `===`. Every key check goes through the
+ *    shared predicates in `.../keys.ts`. Under the Kitty keyboard protocol
+ *    (Ghostty's default) Esc is `\x1b[27u`, not `\x1b`, so raw comparisons
+ *    trapped the user in the custom-answer field with no way out.
+ * 2. ALWAYS pad rendered lines to the full overlay width. pi composites an
+ *    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 {
+	isBackspaceKey,
+	isEnterKey,
+	isEscapeKey,
+	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,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
 import type { QuestionnaireSession } from "../questionnaire.ts";
 import type { QuestionnaireResult } from "../tool/schema.ts";
 
@@ -29,15 +51,23 @@ export interface DialogOptions {
 	/** Called exactly once with the final outcome. */
 	done(result: QuestionnaireResult): void;
 	requestRender?(): void;
+	/**
+	 * 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;
 }
 
-/**
- * Two-mode dialog: option selection, and (after choosing "Type something.")
- * free-text entry. Custom-answer entry is handled here rather than by mounting
- * pi-tui's `Input`, because `Input` owns its own key handling and would fight
- * the selector for Esc and Enter.
- */
+/** 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. */
+	focused = false;
+
 	private readonly opts: DialogOptions;
 	private selector: OptionSelector;
 	private customText: string | undefined;
@@ -66,14 +96,12 @@ export class QuestionnaireDialog {
 		}));
 
 		return new OptionSelector({
-			title: `${session.title()}\n\n${session.current?.question ?? ""}`,
 			options,
 			theme: this.opts.theme,
 			onSelect: (option, comment) => {
 				if (session.isCustomRow(option.value)) {
-					// Enter free-text mode. The note typed on the sentinel row is
-					// carried across so a user who commented and then chose to type
-					// a custom answer does not silently lose it.
+					// Enter free-text mode. A note typed on the sentinel row is
+					// carried across so it is not silently lost.
 					this.pendingNotes = comment;
 					this.customText = "";
 					this.repaint();
@@ -112,24 +140,59 @@ export class QuestionnaireDialog {
 		this.selector.invalidate();
 	}
 
-	render(width: number): string[] {
+	private style(role: string, text: string): string {
+		if (this.opts.theme) return this.opts.theme.fg(role, text);
+		return role === "dim" ? `\x1b[2m${text}\x1b[0m` : text;
+	}
+
+	/** Inner content lines, before the box is drawn around them. */
+	private contentLines(inner: number): string[] {
+		const session = this.session;
+		const lines: string[] = [this.style("accent", session.title()), ""];
+		lines.push(...wrapTextWithAnsi(session.current?.question ?? "", inner));
+		lines.push("");
+
 		if (this.customText !== undefined) {
-			const session = this.session;
-			return [
-				session.title(),
-				"",
-				session.current?.question ?? "",
-				"",
-				`  ${this.customText}▌`,
-				"",
-				this.dim("  enter submit · esc back to options"),
-			];
+			// 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 : ""}▌`;
+			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;
 		}
-		return this.selector.render(width);
+
+		lines.push(...this.selector.render(inner));
+		return lines;
 	}
 
-	private dim(text: string): string {
-		return this.opts.theme ? this.opts.theme.fg("dim", text) : `\x1b[2m${text}\x1b[0m`;
+	render(width: number): string[] {
+		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 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("│")}`);
+		}
+		out.push(border(`└${"─".repeat(outer - 2)}┘`));
+		return out;
 	}
 
 	handleInput(keyData: string): void {
@@ -137,15 +200,17 @@ export class QuestionnaireDialog {
 			this.selector.handleInput(keyData);
 			return;
 		}
-		// Free-text mode. Esc unwinds to the option list rather than cancelling
-		// the whole dialog — one Esc should never discard more than one layer.
-		if (keyData === "\x1b") {
+
+		// Free-text mode. Every check below MUST use a shared predicate — see
+		// the header comment. Esc unwinds to the option list rather than
+		// cancelling the dialog: one Esc never discards more than one layer.
+		if (isEscapeKey(keyData)) {
 			this.customText = undefined;
 			this.pendingNotes = undefined;
 			this.repaint();
 			return;
 		}
-		if (keyData === "\r" || keyData === "\n") {
+		if (isEnterKey(keyData)) {
 			const text = this.customText.trim();
 			if (text.length === 0) return; // Empty custom answers are not submittable.
 			this.session.recordAnswer(text, { custom: true, notes: this.pendingNotes });
@@ -154,23 +219,23 @@ export class QuestionnaireDialog {
 			this.advance();
 			return;
 		}
-		if (keyData === "\x7f" || keyData === "\b") {
+		if (isBackspaceKey(keyData)) {
 			this.customText = this.customText.slice(0, -1);
 			this.repaint();
 			return;
 		}
-		if (isPrintableChunk(keyData)) {
+		if (isPrintable(keyData)) {
 			this.customText += keyData;
 			this.repaint();
+			return;
+		}
+		// Kitty/modifyOtherKeys terminals encode plain printables as CSI-u.
+		const decoded = decodeKittyPrintable(keyData);
+		if (decoded !== undefined && isPrintable(decoded)) {
+			this.customText += decoded;
+			this.repaint();
 		}
+		// Anything else (arrows, unhandled chords) is inert — never inserted
+		// into the field as literal escape-sequence garbage.
 	}
 }
-
-function isPrintableChunk(keyData: string): boolean {
-	if (keyData.length === 0) return false;
-	for (const char of keyData) {
-		const code = char.codePointAt(0) ?? 0;
-		if (code < 0x20 || code === 0x7f) return false;
-	}
-	return true;
-}