@mrclrchtr/supi-ask-user 1.4.0 → 1.6.0

package/src/ui/overlay-component.ts

@@ -0,0 +1,400 @@
+import {
+  type Component,
+  Editor,
+  type Focusable,
+  Key,
+  matchesKey,
+  SelectList,
+} from "@earendil-works/pi-tui";
+import type { NormalizedChoiceQuestion } from "../types.ts";
+import { createActionList } from "./overlay-actions.ts";
+import {
+  clampIndex,
+  currentCustomValue,
+  currentPreviewText,
+  currentTextValue,
+  makeEditorTheme,
+  makeSelectListTheme,
+  renderOverlayFrame,
+} from "./overlay-render.ts";
+import {
+  buildChoiceItems,
+  buildChoiceRows,
+  type ChoiceRow,
+  choiceRowValue,
+  defaultChoiceRowIndex,
+  type FocusTarget,
+  noteTargetLabel,
+  type OverlayAction,
+  type OverlayMode,
+  previewOptionIndexForRows,
+} from "./overlay-view.ts";
+import type { OverlayArgs } from "./types.ts";
+
+export class AskUserOverlay implements Component, Focusable {
+  focused = false;
+  private readonly editor: Editor;
+  private focus: FocusTarget = "choices";
+  private mode: OverlayMode = "choice";
+  private closed = false;
+  private cachedWidth: number | undefined;
+  private cachedLines: string[] | undefined;
+  private readonly onAbort: () => void;
+  private choiceRows: ChoiceRow[] = [];
+  private choiceRowIndex = 0;
+  private previewOptionIndex = 0;
+  private choiceList: SelectList | undefined;
+  private textActions: Array<{ action: OverlayAction; label: string }> = [];
+  private actionIndex = 0;
+  private actionList: SelectList | undefined;
+  constructor(private readonly args: OverlayArgs) {
+    this.editor = new Editor(args.tui, makeEditorTheme(args.theme));
+    this.editor.onSubmit = (value) => this.handleEditorSubmit(value);
+    this.syncCurrentQuestion();
+    this.onAbort = () => {
+      this.args.controller.abort();
+      this.finish();
+    };
+    args.signal?.addEventListener("abort", this.onAbort);
+  }
+
+  render(width: number): string[] {
+    this.editor.focused = this.focus === "editor";
+    if (this.cachedWidth === width && this.cachedLines) return this.cachedLines;
+    this.cachedWidth = width;
+    this.cachedLines = renderOverlayFrame({
+      width,
+      theme: this.args.theme,
+      controller: this.args.controller,
+      mode: this.mode,
+      focus: this.focus,
+      editor: this.editor,
+      choiceRows: this.choiceRows,
+      choiceRowIndex: this.choiceRowIndex,
+      actionList: this.actionList,
+      textActionLabels: this.textActions.map(({ label }) => label),
+      previewText: currentPreviewText(
+        this.args.controller.currentQuestion,
+        this.previewOptionIndex,
+      ),
+      noteTargetLabel:
+        this.mode === "note-input"
+          ? noteTargetLabel(this.args.controller, this.choiceRows, this.choiceRowIndex)
+          : undefined,
+    });
+    return this.cachedLines;
+  }
+
+  handleInput(data: string): void {
+    if (this.closed || this.args.controller.isTerminal) return;
+
+    if (this.args.keybindings.matches(data, "app.tools.expand")) {
+      this.args.onToggleToolsExpanded?.();
+      return;
+    }
+
+    if (this.mode === "note-input" && matchesKey(data, Key.escape)) {
+      const question = this.args.controller.currentQuestion;
+      const row = this.choiceRows[this.choiceRowIndex];
+      if (question.type === "choice" && row?.kind === "option") {
+        this.restoreChoiceMode(question, row.optionIndex);
+      }
+      return;
+    }
+    if (matchesKey(data, Key.escape)) {
+      this.args.controller.cancel();
+      this.finish();
+      return;
+    }
+    if (this.mode !== "note-input" && matchesKey(data, Key.left)) {
+      if (this.args.controller.goBack()) {
+        this.syncCurrentQuestion();
+        this.refresh();
+      }
+      return;
+    }
+
+    switch (this.focus) {
+      case "choices":
+        this.handleChoiceKey(data);
+        return;
+      case "actions":
+        this.handleActionKey(data);
+        return;
+      case "editor":
+        this.handleEditorKey(data);
+        return;
+    }
+  }
+
+  invalidate(): void {
+    this.cachedLines = undefined;
+    this.choiceList?.invalidate();
+    this.actionList?.invalidate();
+    this.editor.invalidate();
+  }
+
+  dispose(): void {
+    this.closed = true;
+    this.args.signal?.removeEventListener("abort", this.onAbort);
+  }
+
+  private handleChoiceKey(data: string): void {
+    const question = this.args.controller.currentQuestion;
+    if (question.type !== "choice" || !this.choiceList) return;
+
+    if (data === "n") {
+      const row = this.choiceRows[this.choiceRowIndex];
+      if (row?.kind === "option") this.openNoteEditor(question, row.optionIndex);
+      return;
+    }
+
+    if (matchesKey(data, Key.space)) {
+      const row = this.choiceRows[this.choiceRowIndex];
+      if (row?.kind === "option") this.applyChoiceSelection(question, row.optionIndex, false);
+      return;
+    }
+
+    this.choiceList.handleInput(data);
+  }
+  private handleActionKey(data: string): void {
+    const question = this.args.controller.currentQuestion;
+    if (!this.actionList) return;
+
+    if (question.type === "text") {
+      if (matchesKey(data, Key.up) && this.actionIndex === 0) {
+        this.focus = "editor";
+        this.refresh();
+        return;
+      }
+    } else if (matchesKey(data, Key.up) && this.actionIndex === 0) {
+      this.focus = "choices";
+      this.refresh();
+      return;
+    }
+
+    this.actionList.handleInput(data);
+    this.refresh();
+  }
+
+  private handleEditorKey(data: string): void {
+    if (this.mode === "text" && matchesKey(data, Key.down) && this.textActions.length > 0) {
+      this.focus = "actions";
+      this.refresh();
+      return;
+    }
+
+    this.editor.handleInput(data);
+    this.refresh();
+  }
+
+  private handleEditorSubmit(value: string): void {
+    const trimmed = value.trim();
+    const question = this.args.controller.currentQuestion;
+
+    if (this.mode === "discuss-input") {
+      this.args.controller.finishDiscuss(trimmed || undefined);
+      this.finish();
+      return;
+    }
+    if (this.mode === "note-input") {
+      if (question.type !== "choice") return;
+      const row = this.choiceRows[this.choiceRowIndex];
+      if (row?.kind !== "option") return;
+      this.args.controller.setChoiceOptionNote(question, row.optionIndex, trimmed || undefined);
+      this.restoreChoiceMode(question, row.optionIndex);
+      return;
+    }
+    if (this.mode === "custom-input") {
+      if (trimmed.length === 0) return;
+      this.args.controller.setAnswer(question.id, { kind: "custom", value: trimmed });
+      this.advanceAfterQuestion();
+      return;
+    }
+    if (trimmed.length === 0) {
+      if (question.required) return;
+      this.args.controller.clearAnswer(question.id);
+      this.advanceAfterQuestion();
+      return;
+    }
+
+    this.args.controller.setAnswer(question.id, { kind: "text", value: trimmed });
+    this.advanceAfterQuestion();
+  }
+
+  private applyChoiceSelection(
+    question: NormalizedChoiceQuestion,
+    optionIndex: number,
+    submit: boolean,
+  ): void {
+    if (question.multi) {
+      this.toggleMultiChoice(question, optionIndex);
+      if (submit && this.args.controller.hasAnswer(question.id)) this.advanceAfterQuestion();
+      return;
+    }
+
+    this.args.controller.selectChoiceOption(question, optionIndex);
+    this.choiceRowIndex = optionIndex;
+    this.previewOptionIndex = optionIndex;
+    if (submit) {
+      this.advanceAfterQuestion();
+      return;
+    }
+    this.buildChoiceList(question);
+    this.refresh();
+  }
+
+  private toggleMultiChoice(question: NormalizedChoiceQuestion, optionIndex: number): void {
+    this.args.controller.toggleChoiceOption(question, optionIndex);
+    this.choiceRowIndex = optionIndex;
+    this.previewOptionIndex = optionIndex;
+    this.buildChoiceList(question);
+    this.refresh();
+  }
+
+  private openNoteEditor(question: NormalizedChoiceQuestion, optionIndex: number): void {
+    const option = question.options[optionIndex];
+    if (!option) return;
+    this.mode = "note-input";
+    this.focus = "editor";
+    this.choiceRowIndex = optionIndex;
+    this.previewOptionIndex = optionIndex;
+    this.editor.setText(this.args.controller.getChoiceOptionNote(question.id, option.value) ?? "");
+    this.refresh();
+  }
+
+  private restoreChoiceMode(question: NormalizedChoiceQuestion, optionIndex: number): void {
+    this.mode = "choice";
+    this.focus = "choices";
+    this.editor.setText("");
+    this.choiceRows = buildChoiceRows(this.args.controller, question);
+    const nextIndex = this.choiceRows.findIndex(
+      (row) => row.kind === "option" && row.optionIndex === optionIndex,
+    );
+    this.choiceRowIndex = clampIndex(
+      nextIndex >= 0 ? nextIndex : optionIndex,
+      this.choiceRows.length,
+    );
+    this.previewOptionIndex = optionIndex;
+    this.buildChoiceList(question);
+    this.refresh();
+  }
+
+  private handleAction(action: OverlayAction): void {
+    switch (action) {
+      case "other":
+        this.mode = "custom-input";
+        this.focus = "editor";
+        this.editor.setText(currentCustomValue(this.args.controller));
+        this.refresh();
+        return;
+      case "skip":
+        this.args.controller.clearAnswer(this.args.controller.currentQuestion.id);
+        this.advanceAfterQuestion();
+        return;
+      case "discuss":
+        this.mode = "discuss-input";
+        this.focus = "editor";
+        this.editor.setText("");
+        this.refresh();
+        return;
+      case "partial":
+        this.args.controller.finishPartial();
+        this.finish();
+        return;
+    }
+  }
+
+  private advanceAfterQuestion(): void {
+    if (!this.args.controller.goNext()) {
+      this.args.controller.finishSubmitted();
+      this.finish();
+      return;
+    }
+    this.syncCurrentQuestion();
+    this.refresh();
+  }
+
+  private syncCurrentQuestion(): void {
+    const question = this.args.controller.currentQuestion;
+    if (question.type === "text") {
+      this.mode = "text";
+      this.focus = "editor";
+      this.editor.setText(currentTextValue(this.args.controller, question.initial));
+      this.buildTextActions();
+      this.choiceRows = [];
+      return;
+    }
+
+    this.mode = "choice";
+    this.focus = "choices";
+    this.textActions = [];
+    this.actionList = undefined;
+    this.editor.setText("");
+    this.choiceRows = buildChoiceRows(this.args.controller, question);
+    this.choiceRowIndex = clampIndex(
+      defaultChoiceRowIndex(this.args.controller, question, this.choiceRows),
+      this.choiceRows.length,
+    );
+    this.previewOptionIndex =
+      previewOptionIndexForRows(this.choiceRows, this.choiceRowIndex, this.previewOptionIndex) ?? 0;
+    this.buildChoiceList(question);
+  }
+
+  private buildChoiceList(question: NormalizedChoiceQuestion): void {
+    const items = buildChoiceItems(this.args.controller, question, this.choiceRows);
+
+    const list = new SelectList(
+      items,
+      Math.min(this.choiceRows.length, 10),
+      makeSelectListTheme(this.args.theme),
+    );
+    list.onSelectionChange = (item) => {
+      const nextIndex = this.choiceRows.findIndex((row) => choiceRowValue(row) === item.value);
+      if (nextIndex < 0) return;
+      this.choiceRowIndex = nextIndex;
+      this.previewOptionIndex =
+        previewOptionIndexForRows(this.choiceRows, nextIndex, this.previewOptionIndex) ??
+        this.previewOptionIndex;
+      this.refresh();
+    };
+    list.onSelect = (item) => {
+      const row = this.choiceRows.find((candidate) => choiceRowValue(candidate) === item.value);
+      if (!row) return;
+      if (row.kind === "option") {
+        this.applyChoiceSelection(question, row.optionIndex, true);
+        return;
+      }
+      this.handleAction(row.action);
+    };
+    list.setSelectedIndex(this.choiceRowIndex);
+    this.choiceList = list;
+  }
+
+  private buildTextActions(): void {
+    const state = createActionList({
+      controller: this.args.controller,
+      theme: this.args.theme,
+      actionIndex: this.actionIndex,
+      onIndexChange: (index) => {
+        this.actionIndex = index;
+        this.refresh();
+      },
+      onAction: (action) => this.handleAction(action),
+    });
+    this.textActions = state.entries;
+    this.actionList = state.list;
+    this.actionIndex = state.index;
+  }
+
+  private refresh(): void {
+    this.cachedLines = undefined;
+    this.args.tui.requestRender();
+  }
+  private finish(): void {
+    if (this.closed) return;
+    this.closed = true;
+    this.args.signal?.removeEventListener("abort", this.onAbort);
+    this.args.done(this.args.controller.outcome());
+  }
+}

package/src/ui/overlay-render.ts

@@ -8,7 +8,14 @@ import {
 } from "@earendil-works/pi-tui";
 import type { AskUserController } from "../session/controller.ts";
 import type { NormalizedQuestionnaire } from "../types.ts";
-import { type FocusTarget, footerText, type OverlayMode, splitColumns } from "./overlay-view.ts";
+import {
+  type ChoiceRow,
+  type FocusTarget,
+  footerText,
+  type OverlayMode,
+  renderChoiceList,
+  splitColumns,
+} from "./overlay-view.ts";
 
 export interface RenderOverlayFrameArgs {
   width: number;
@@ -17,10 +24,12 @@ export interface RenderOverlayFrameArgs {
   mode: OverlayMode;
   focus: FocusTarget;
   editor: Editor;
-  choiceList: SelectList | undefined;
+  choiceRows: ChoiceRow[];
+  choiceRowIndex: number;
   actionList: SelectList | undefined;
   textActionLabels: string[];
   previewText?: string;
+  noteTargetLabel?: string;
 }
 
 export function renderOverlayFrame(args: RenderOverlayFrameArgs): string[] {
@@ -114,9 +123,22 @@ function renderBody(args: RenderOverlayFrameArgs): string[] {
 }
 
 function renderChoiceBody(args: RenderOverlayFrameArgs): string[] {
-  const leftLines = args.choiceList?.render(splitLeftWidth(args.width)) ?? [];
-
-  if (args.mode === "custom-input" || args.mode === "discuss-input") {
+  const question = args.controller.currentQuestion;
+  const listWidth = splitLeftWidth(args.width);
+
+  const leftLines =
+    question.type === "choice"
+      ? renderChoiceList({
+          controller: args.controller,
+          question,
+          rows: args.choiceRows,
+          selectedIndex: args.choiceRowIndex,
+          theme: args.theme,
+          width: listWidth,
+        })
+      : [];
+
+  if (args.mode === "custom-input" || args.mode === "discuss-input" || args.mode === "note-input") {
     const rightLines = renderEditorLines(args, splitRightWidth(args.width));
     if (args.width >= 100) {
       return splitColumns({
@@ -169,7 +191,11 @@ function renderEditorLines(args: RenderOverlayFrameArgs, width: number): string[
       ? "Discuss instead"
       : args.mode === "custom-input"
         ? "Other answer"
-        : "Your answer";
+        : args.mode === "note-input"
+          ? args.noteTargetLabel
+            ? `Note for: ${args.noteTargetLabel}`
+            : "Option note"
+          : "Your answer";
 
   const lines = [args.theme.fg("accent", label), ...args.editor.render(Math.max(20, width - 1))];
   const question = args.controller.currentQuestion;

package/src/ui/overlay-view.ts

@@ -1,12 +1,12 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import type { SelectItem } from "@earendil-works/pi-tui";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import type { AskUserController } from "../session/controller.ts";
 import type { NormalizedChoiceQuestion } from "../types.ts";
 
 export type OverlayAction = "other" | "skip" | "discuss" | "partial";
 export type FocusTarget = "choices" | "editor" | "actions";
-export type OverlayMode = "choice" | "text" | "custom-input" | "discuss-input";
+export type OverlayMode = "choice" | "text" | "custom-input" | "discuss-input" | "note-input";
 
 export type ChoiceRow =
   | { kind: "option"; optionIndex: number }
@@ -45,8 +45,8 @@ export function buildChoiceItems(
               question,
               optionIndex: row.optionIndex,
               label: option.label,
-              description: option.description,
               selectedIndexes,
+              hasNote: !!controller.getChoiceOptionNote(question.id, option.value),
             }),
           ]
         : [];
@@ -117,9 +117,12 @@ export function footerText(args: {
   if (mode === "custom-input" || mode === "discuss-input") {
     return "Enter submit • Esc cancel";
   }
+  if (mode === "note-input") {
+    return "Enter save • Esc close";
+  }
   return question.multi
-    ? "↑↓ move • Space toggle • Enter submit • ← back • Esc cancel"
-    : "↑↓ move • Space select • Enter submit • ← back • Esc cancel";
+    ? "↑↓ move • Space toggle • Enter submit • n note • ← back • Esc cancel"
+    : "↑↓ move • Space select • Enter submit • n note • ← back • Esc cancel";
 }
 
 export function splitColumns(args: {
@@ -147,14 +150,123 @@ export function choiceRowValue(row: ChoiceRow): string {
   return row.kind === "option" ? `option:${row.optionIndex}` : `action:${row.action}`;
 }
 
+export function noteTargetLabel(
+  controller: AskUserController,
+  choiceRows: ChoiceRow[],
+  choiceRowIndex: number,
+): string | undefined {
+  const question = controller.currentQuestion;
+  if (question.type !== "choice") return undefined;
+  const row = choiceRows[choiceRowIndex];
+  if (row?.kind !== "option") return undefined;
+  return question.options[row.optionIndex]?.label;
+}
+
+function renderOptionRow(args: {
+  option: { label: string; description?: string };
+  labelText: string;
+  hasNote: boolean;
+  isSelected: boolean;
+  theme: Theme;
+  width: number;
+}): string[] {
+  const { theme, isSelected, labelText, hasNote, width, option } = args;
+  const prefix = isSelected ? "\u2192 " : "  ";
+  const baseText = isSelected
+    ? theme.fg("accent", `${prefix}${labelText}`)
+    : `${prefix}${labelText}`;
+  const noteSuffix = hasNote ? ` ${theme.fg("accent", "[note]")}` : "";
+
+  const lines: string[] = [`${baseText}${noteSuffix}`];
+
+  if (option.description) {
+    const descWidth = Math.max(10, width - 2);
+    const wrapped = wrapTextWithAnsi(option.description, descWidth);
+    for (const descLine of wrapped) {
+      lines.push(theme.fg("muted", `  ${descLine}`));
+    }
+  }
+
+  return lines;
+}
+
+function renderActionRow(args: {
+  actionLabel: string;
+  isSelected: boolean;
+  theme: Theme;
+}): string[] {
+  const { theme, isSelected, actionLabel } = args;
+  const prefix = isSelected ? "\u2192 " : "  ";
+  return [isSelected ? theme.fg("accent", `${prefix}${actionLabel}`) : `${prefix}${actionLabel}`];
+}
+
+function prepareOptionMarker(
+  question: NormalizedChoiceQuestion,
+  optionIndex: number,
+  selectedIndexes: Set<number>,
+): string {
+  if (question.multi) {
+    return selectedIndexes.has(optionIndex) ? "[x]" : "[ ]";
+  }
+  return selectedIndexes.has(optionIndex) ? "(*)" : "( )";
+}
+
+function prepareOptionLabel(
+  option: { label: string },
+  marker: string,
+  recommended: boolean,
+): string {
+  return `${marker} ${option.label}${recommended ? " (recommended)" : ""}`;
+}
+
+export function renderChoiceList(args: {
+  controller: AskUserController;
+  question: NormalizedChoiceQuestion;
+  rows: ChoiceRow[];
+  selectedIndex: number;
+  theme: Theme;
+  width: number;
+}): string[] {
+  const { controller, question, rows, selectedIndex, theme, width } = args;
+  const lines: string[] = [];
+  const selectedIndexes = new Set(controller.getSelectedIndexes(question));
+
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    const isSelected = i === selectedIndex;
+
+    if (row.kind === "option") {
+      const option = question.options[row.optionIndex];
+      if (!option) continue;
+
+      const marker = prepareOptionMarker(question, row.optionIndex, selectedIndexes);
+      const recommended = question.recommendedIndexes.includes(row.optionIndex);
+      const hasNote = !!controller.getChoiceOptionNote(question.id, option.value);
+      const labelText = prepareOptionLabel(option, marker, recommended);
+
+      lines.push(...renderOptionRow({ option, labelText, hasNote, isSelected, theme, width }));
+    } else {
+      const answer = controller.getAnswer(question.id);
+      const actionLabelText =
+        row.action === "other" && answer?.kind === "custom"
+          ? `Other \u2014 ${answer.value}`
+          : actionLabel(row.action);
+
+      lines.push(...renderActionRow({ actionLabel: actionLabelText, isSelected, theme }));
+    }
+  }
+
+  return lines;
+}
+
 function buildOptionItem(args: {
   question: NormalizedChoiceQuestion;
   optionIndex: number;
   label: string;
-  description: string | undefined;
   selectedIndexes: Set<number>;
+  hasNote: boolean;
 }): SelectItem {
-  const { question, optionIndex, label, description, selectedIndexes } = args;
+  const { question, optionIndex, label, selectedIndexes, hasNote } = args;
   const recommended = question.recommendedIndexes.includes(optionIndex) ? " (recommended)" : "";
   const marker = question.multi
     ? selectedIndexes.has(optionIndex)
@@ -165,8 +277,7 @@ function buildOptionItem(args: {
       : "( )";
   return {
     value: choiceRowValue({ kind: "option", optionIndex }),
-    label: `${marker} ${label}${recommended}`,
-    description,
+    label: `${marker} ${label}${recommended}${hasNote ? " [note]" : ""}`,
   };
 }