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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hank-warren/pi-ask-user-question",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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,29 @@
  * 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.
  */
 
+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, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import type { QuestionnaireSession } from "../questionnaire.ts";
 import type { QuestionnaireResult } from "../tool/schema.ts";
 
@@ -29,15 +42,18 @@ export interface DialogOptions {
 	/** Called exactly once with the final outcome. */
 	done(result: QuestionnaireResult): void;
 	requestRender?(): void;
+	/** Overlay width cap. Defaults to 84 columns. */
+	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.
- */
+const DEFAULT_MAX_WIDTH = 84;
+/** Left/right border plus one space of padding on each side. */
+const CHROME_COLUMNS = 4;
+
 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 +82,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 +126,47 @@ 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"),
-			];
+			// 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}▌`);
+			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 outer = Math.max(20, Math.min(width, this.opts.maxWidth ?? DEFAULT_MAX_WIDTH));
+		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.
+			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 +174,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 +193,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;
-}