@mrclrchtr/supi-ask-user 0.1.0

package/ui-rich-handlers.ts

@@ -0,0 +1,313 @@
+// Input handlers for the rich overlay questionnaire UI.
+
+import { Key, matchesKey } from "@mariozechner/pi-tui";
+import type { NormalizedQuestion, NormalizedStructuredQuestion } from "./types.ts";
+import { isEditorMode, selectedIndexesForQuestion } from "./ui-rich-render.ts";
+import { currentNote, currentRowSupportsNotes } from "./ui-rich-render-notes.ts";
+import {
+  existingStructuredInputValue,
+  interactiveRows,
+  mergedMultiNoteMap,
+  multiNoteMapFromAnswer,
+  type OverlayDeps,
+  resetStateForCurrent,
+  rowCount,
+  singleNoteFromAnswer,
+} from "./ui-rich-state.ts";
+
+export function onEditorSubmit(value: string, deps: OverlayDeps): void {
+  const question = deps.flow.currentQuestion;
+  if (!question) return;
+  const trimmed = value.trim();
+  const { state, editor, refresh } = deps;
+  if (state.subMode === "text-input") {
+    if (trimmed.length === 0) return;
+    deps.flow.setAnswer({ questionId: question.id, source: "text", value: trimmed });
+    moveAfterAnswer(deps);
+    return;
+  }
+  if (state.subMode === "other-input") {
+    if (trimmed.length === 0) {
+      state.subMode = "select";
+      editor.setText("");
+      refresh();
+      return;
+    }
+    deps.flow.setAnswer({ questionId: question.id, source: "other", value: trimmed });
+    moveAfterAnswer(deps);
+    return;
+  }
+  if (state.subMode === "discuss-input") {
+    deps.flow.setAnswer(
+      trimmed.length > 0
+        ? { questionId: question.id, source: "discuss", value: trimmed }
+        : { questionId: question.id, source: "discuss" },
+    );
+    moveAfterAnswer(deps);
+    return;
+  }
+  if (state.subMode === "note-input") {
+    applyNoteEdit(trimmed, deps);
+    state.subMode = "select";
+    state.noteTarget = undefined;
+    editor.setText("");
+    refresh();
+  }
+}
+
+function applyNoteEdit(note: string, deps: OverlayDeps): void {
+  const { flow, state } = deps;
+  const target = state.noteTarget;
+  if (!target) return;
+  if (target.mode === "single") {
+    if (note.length > 0) state.stagedSingleNotes.set(target.questionId, note);
+    else state.stagedSingleNotes.delete(target.questionId);
+    return;
+  }
+  const existing = new Map(
+    state.stagedMultiNotes.get(target.questionId) ??
+      multiNoteMapFromAnswer(flow, target.questionId),
+  );
+  if (note.length > 0) existing.set(target.optionIndex, note);
+  else existing.delete(target.optionIndex);
+  if (existing.size > 0) state.stagedMultiNotes.set(target.questionId, existing);
+  else state.stagedMultiNotes.delete(target.questionId);
+}
+
+export function handleOverlayInput(data: string, deps: OverlayDeps): void {
+  const { state, flow } = deps;
+  if (isEditorMode(state.subMode)) {
+    if (matchesKey(data, Key.escape)) {
+      handleEditorEscape(deps);
+      return;
+    }
+    deps.editor.handleInput(data);
+    deps.refresh();
+    return;
+  }
+  if (matchesKey(data, Key.escape)) {
+    flow.cancel();
+    deps.finish(flow.outcome());
+    return;
+  }
+  if (flow.currentMode === "reviewing") {
+    handleReviewInput(data, deps);
+    return;
+  }
+  handleSelectInput(data, deps);
+}
+
+function handleEditorEscape(deps: OverlayDeps): void {
+  const { state, editor, flow, refresh } = deps;
+  if (state.subMode === "text-input") {
+    flow.cancel();
+    deps.finish(flow.outcome());
+    return;
+  }
+  state.subMode = "select";
+  state.noteTarget = undefined;
+  editor.setText("");
+  refresh();
+}
+
+function handleSelectInput(data: string, deps: OverlayDeps): void {
+  const { flow, state } = deps;
+  const question = flow.currentQuestion;
+  if (!question) return;
+  const maxIndex = Math.max(0, rowCount(question) - 1);
+  if (matchesKey(data, Key.up)) {
+    moveSelection(question, Math.max(0, state.selectedIndex - 1), deps);
+    return;
+  }
+  if (matchesKey(data, Key.down)) {
+    moveSelection(question, Math.min(maxIndex, state.selectedIndex + 1), deps);
+    return;
+  }
+  if (handleSelectNav(data, deps)) return;
+  if (question.type === "multichoice" && matchesKey(data, Key.space)) {
+    toggleCurrentSelection(question, deps);
+    return;
+  }
+  if (matchesKey(data, "n") && currentRowSupportsNotes(question, state)) {
+    openNoteEditor(question, deps);
+    return;
+  }
+  if (matchesKey(data, Key.enter)) {
+    handleSelectEnter(question, deps);
+    return;
+  }
+}
+
+function openNoteEditor(question: NormalizedQuestion, deps: OverlayDeps): void {
+  if (question.type === "text") return;
+  const row = interactiveRows(question)[deps.state.selectedIndex];
+  if (!row || row.kind !== "option") return;
+  deps.state.subMode = "note-input";
+  deps.state.noteTarget =
+    question.type === "multichoice"
+      ? { mode: "multi", questionId: question.id, optionIndex: row.optionIndex }
+      : { mode: "single", questionId: question.id };
+  deps.editor.setText(currentNote(deps.flow, deps.state, question) ?? "");
+  deps.refresh();
+}
+
+function handleSelectNav(data: string, deps: OverlayDeps): boolean {
+  const { flow, refresh } = deps;
+  if (matchesKey(data, Key.shift("tab")) || matchesKey(data, Key.left)) {
+    if (flow.goBack()) {
+      resetStateForCurrent(deps);
+      refresh();
+    }
+    return true;
+  }
+  if (matchesKey(data, Key.tab) || matchesKey(data, Key.right)) {
+    if (flow.allAnswered() && flow.enterReview()) refresh();
+    return true;
+  }
+  return false;
+}
+
+function handleSelectEnter(question: NormalizedQuestion, deps: OverlayDeps): void {
+  if (question.type === "text") return;
+  const row = interactiveRows(question)[deps.state.selectedIndex];
+  if (!row) return;
+  if (row.kind === "option") {
+    if (question.type === "multichoice") {
+      handleSubmitSelections(question, deps);
+      return;
+    }
+    handleOptionRow(question, row.optionIndex, deps);
+    return;
+  }
+  openStructuredInput(question, row.kind, deps);
+}
+
+function handleOptionRow(
+  question: NormalizedStructuredQuestion,
+  optionIndex: number,
+  deps: OverlayDeps,
+): void {
+  if (question.type === "multichoice") {
+    toggleSelection(question, optionIndex, deps);
+    deps.refresh();
+    return;
+  }
+  const option = question.options[optionIndex];
+  const note =
+    deps.state.stagedSingleNotes.get(question.id) ?? singleNoteFromAnswer(deps.flow, question.id);
+  deps.flow.setAnswer(
+    question.type === "yesno"
+      ? {
+          questionId: question.id,
+          source: "yesno",
+          value: option.value as "yes" | "no",
+          optionIndex: optionIndex as 0 | 1,
+          note,
+        }
+      : {
+          questionId: question.id,
+          source: "option",
+          value: option.value,
+          optionIndex,
+          note,
+        },
+  );
+  moveAfterAnswer(deps);
+}
+
+function toggleCurrentSelection(
+  question: Extract<NormalizedStructuredQuestion, { type: "multichoice" }>,
+  deps: OverlayDeps,
+): void {
+  const row = interactiveRows(question)[deps.state.selectedIndex];
+  if (!row || row.kind !== "option") return;
+  toggleSelection(question, row.optionIndex, deps);
+  deps.refresh();
+}
+
+function openStructuredInput(
+  question: NormalizedStructuredQuestion,
+  kind: "other" | "discuss",
+  deps: OverlayDeps,
+): void {
+  deps.state.subMode = kind === "other" ? "other-input" : "discuss-input";
+  deps.editor.setText(existingStructuredInputValue(deps.flow, question.id, kind));
+  deps.refresh();
+}
+
+function moveSelection(question: NormalizedQuestion, nextIndex: number, deps: OverlayDeps): void {
+  const { state, refresh } = deps;
+  if (state.selectedIndex === nextIndex) {
+    refresh();
+    return;
+  }
+  state.selectedIndex = nextIndex;
+  if (question.type === "text") {
+    refresh();
+    return;
+  }
+  const row = interactiveRows(question)[nextIndex];
+  if (row?.kind === "other" || row?.kind === "discuss") {
+    openStructuredInput(question, row.kind, deps);
+    return;
+  }
+  refresh();
+}
+
+function toggleSelection(
+  question: NormalizedStructuredQuestion,
+  optionIndex: number,
+  deps: OverlayDeps,
+): void {
+  const existing = new Set(selectedIndexesForQuestion(deps.flow, deps.state, question));
+  if (existing.has(optionIndex)) existing.delete(optionIndex);
+  else existing.add(optionIndex);
+  deps.state.stagedSelections.set(
+    question.id,
+    [...existing].sort((a, b) => a - b),
+  );
+}
+
+function handleSubmitSelections(question: NormalizedStructuredQuestion, deps: OverlayDeps): void {
+  if (question.type !== "multichoice") return;
+  const indexes = selectedIndexesForQuestion(deps.flow, deps.state, question);
+  if (indexes.length === 0) return;
+  const noteMap = mergedMultiNoteMap(deps, question.id);
+  const selections = indexes.map((optionIndex) => ({
+    value: question.options[optionIndex].value,
+    optionIndex,
+    note: noteMap.get(optionIndex),
+  }));
+  deps.flow.setAnswer({
+    questionId: question.id,
+    source: "options",
+    values: selections.map((s) => s.value),
+    optionIndexes: selections.map((s) => s.optionIndex),
+    selections,
+  });
+  moveAfterAnswer(deps);
+}
+
+function handleReviewInput(data: string, deps: OverlayDeps): void {
+  const { flow, refresh } = deps;
+  if (matchesKey(data, Key.enter)) {
+    if (flow.submit()) deps.finish(flow.outcome());
+    return;
+  }
+  if (matchesKey(data, Key.shift("tab")) || matchesKey(data, Key.left) || matchesKey(data, "b")) {
+    if (flow.goBack()) {
+      resetStateForCurrent(deps);
+      refresh();
+    }
+  }
+}
+
+export function moveAfterAnswer(deps: OverlayDeps): void {
+  deps.flow.advance();
+  if (deps.flow.isTerminal()) {
+    deps.finish(deps.flow.outcome());
+    return;
+  }
+  resetStateForCurrent(deps);
+  deps.refresh();
+}

package/ui-rich-inline.ts

@@ -0,0 +1,64 @@
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { Editor } from "@mariozechner/pi-tui";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import type { QuestionnaireFlow } from "./flow.ts";
+import { DISCUSS_LABEL, OTHER_LABEL } from "./format.ts";
+import type { NormalizedStructuredQuestion } from "./types.ts";
+import type { OverlayRenderState } from "./ui-rich-render.ts";
+import type { InteractiveRow } from "./ui-rich-state.ts";
+
+export function structuredRowLabel(
+  flow: Pick<QuestionnaireFlow, "getAnswer">,
+  question: NormalizedStructuredQuestion,
+  row: Extract<InteractiveRow, { kind: "other" | "discuss" }>,
+): string {
+  const label = row.kind === "other" ? OTHER_LABEL : DISCUSS_LABEL;
+  const answer = flow.getAnswer(question.id);
+  if (row.kind === "other" && answer?.source === "other") return `${label}: ${answer.value}`;
+  if (row.kind === "discuss" && answer?.source === "discuss" && answer.value) {
+    return `${label}: ${answer.value}`;
+  }
+  return label;
+}
+
+export function inlineStructuredRowLines(args: {
+  width: number;
+  theme: Theme;
+  state: OverlayRenderState;
+  editor: Editor;
+  row: InteractiveRow;
+  prefix: string;
+}): string[] | undefined {
+  const { width, theme, state, editor, row, prefix } = args;
+  if (!isInlineStructuredInput(state, row)) return undefined;
+  const label = row.kind === "other" ? OTHER_LABEL : DISCUSS_LABEL;
+  return renderInlineEditorLines(width - visibleWidth(prefix), theme, editor, `${label}: `);
+}
+
+function isInlineStructuredInput(state: OverlayRenderState, row: InteractiveRow): boolean {
+  return (
+    (state.subMode === "other-input" && row.kind === "other") ||
+    (state.subMode === "discuss-input" && row.kind === "discuss")
+  );
+}
+
+function renderInlineEditorLines(
+  width: number,
+  theme: Theme,
+  editor: Editor,
+  prefix = "",
+): string[] {
+  const lines = editor.getLines();
+  const cursor = editor.getCursor();
+  return lines.map((line, index) => {
+    const content = index === cursor.line ? highlightCursor(theme, line, cursor.col) : line;
+    return truncateToWidth(`${prefix}${content}`, Math.max(1, width));
+  });
+}
+
+function highlightCursor(theme: Theme, line: string, col: number): string {
+  const before = line.slice(0, col);
+  const current = line.slice(col, col + 1) || " ";
+  const after = line.slice(col + 1);
+  return `${before}${theme.bg("selectedBg", theme.fg("text", current))}${after}`;
+}

package/ui-rich-render-editor.ts

@@ -0,0 +1,49 @@
+// Editor pane rendering helpers for the rich overlay.
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { Editor } from "@mariozechner/pi-tui";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import type { OverlayRenderState } from "./ui-rich-render.ts";
+
+export function editorCaption(state: OverlayRenderState): string {
+  if (state.subMode === "other-input") return "Other answer";
+  if (state.subMode === "discuss-input") return "Discuss";
+  if (state.subMode === "note-input") return "Note";
+  return "Answer";
+}
+
+export function usesSeparateEditorPane(state: OverlayRenderState): boolean {
+  return state.subMode === "note-input";
+}
+
+export function renderEditorPane(
+  width: number,
+  theme: Theme,
+  editor: Editor,
+  caption: string,
+): string[] {
+  const out: string[] = [];
+  out.push(truncateToWidth(theme.fg("accent", ` ${caption}`), width));
+  out.push("");
+  for (const line of editor.render(width - 2)) out.push(truncateToWidth(` ${line}`, width));
+  return out;
+}
+
+// biome-ignore lint/complexity/useMaxParams: helper mirrors render context
+export function renderEditorBlock(
+  add: (text: string) => void,
+  lines: string[],
+  theme: Theme,
+  editor: Editor,
+  width: number,
+  caption: string,
+): void {
+  add(theme.fg("muted", ` ${caption}:`));
+  for (const line of editor.render(width - 2)) lines.push(` ${truncateToWidth(line, width - 1)}`);
+}
+
+export function padRight(text: string, width: number): string {
+  const visible = truncateToWidth(text, width);
+  const padding = Math.max(0, width - visibleWidth(visible));
+  return `${visible}${" ".repeat(padding)}`;
+}

package/ui-rich-render-notes.ts

@@ -0,0 +1,87 @@
+// Note-related rendering helpers for the rich overlay.
+
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { QuestionnaireFlow } from "./flow.ts";
+import type { MultiSelection, NormalizedQuestion, NormalizedStructuredQuestion } from "./types.ts";
+import type { OverlayRenderState } from "./ui-rich-render.ts";
+import { type InteractiveRow, interactiveRows } from "./ui-rich-state.ts";
+
+export function currentNote(
+  flow: Pick<QuestionnaireFlow, "getAnswer">,
+  state: OverlayRenderState,
+  question: NormalizedQuestion | undefined,
+): string | undefined {
+  if (!question || question.type === "text") return undefined;
+  const row = interactiveRows(question)[state.selectedIndex];
+  if (!row || row.kind !== "option") return undefined;
+  if (question.type === "multichoice")
+    return noteForMultiOption(flow, state, question, row.optionIndex);
+  return noteForSingle(flow, state, question);
+}
+
+export function currentRowSupportsNotes(
+  question: NormalizedQuestion | undefined,
+  state: Pick<OverlayRenderState, "selectedIndex">,
+): boolean {
+  if (!question || question.type === "text") return false;
+  const row = interactiveRows(question)[state.selectedIndex];
+  return row?.kind === "option";
+}
+
+export function visibleNoteMarker(args: {
+  flow: Pick<QuestionnaireFlow, "getAnswer">;
+  state: OverlayRenderState;
+  question: NormalizedStructuredQuestion;
+  row: Extract<InteractiveRow, { kind: "option" }>;
+  active: boolean;
+}): boolean {
+  const { flow, state, question, row, active } = args;
+  if (question.type === "multichoice")
+    return !!noteForMultiOption(flow, state, question, row.optionIndex);
+  return active && !!noteForSingle(flow, state, question);
+}
+
+export function noteForSingle(
+  flow: Pick<QuestionnaireFlow, "getAnswer">,
+  state: Pick<OverlayRenderState, "stagedSingleNotes">,
+  question: Exclude<NormalizedStructuredQuestion, { type: "multichoice" }>,
+): string | undefined {
+  return state.stagedSingleNotes.get(question.id) ?? storedSingleNote(flow.getAnswer(question.id));
+}
+
+function storedSingleNote(
+  answer: ReturnType<Pick<QuestionnaireFlow, "getAnswer">["getAnswer"]>,
+): string | undefined {
+  if (!answer) return undefined;
+  if (answer.source === "option" || answer.source === "yesno") return answer.note;
+  return undefined;
+}
+
+export function noteForMultiOption(
+  flow: Pick<QuestionnaireFlow, "getAnswer">,
+  state: Pick<OverlayRenderState, "stagedMultiNotes">,
+  question: Extract<NormalizedStructuredQuestion, { type: "multichoice" }>,
+  optionIndex: number,
+): string | undefined {
+  const staged = state.stagedMultiNotes.get(question.id)?.get(optionIndex);
+  if (staged !== undefined) return staged;
+  return storedMultiSelections(flow.getAnswer(question.id)).find(
+    (selection) => selection.optionIndex === optionIndex,
+  )?.note;
+}
+
+function storedMultiSelections(
+  answer: ReturnType<Pick<QuestionnaireFlow, "getAnswer">["getAnswer"]>,
+): MultiSelection[] {
+  if (!answer || answer.source !== "options") return [];
+  if (answer.selections.length > 0) return answer.selections;
+  return answer.optionIndexes.map((optionIndex, index) => ({
+    optionIndex,
+    value: answer.values[index] ?? "",
+  }));
+}
+
+export function renderNoteStatus(add: (text: string) => void, theme: Theme, note: string): void {
+  add("");
+  add(theme.fg("muted", ` Notes: ${note}`));
+}