@mrclrchtr/supi-ask-user 1.3.1 → 1.4.0

package/src/ui/choose-renderer.ts

@@ -0,0 +1,11 @@
+import type { AskUserOutcome, NormalizedQuestionnaire } from "../types.ts";
+import { runOverlayQuestionnaire } from "./overlay.ts";
+import type { RunQuestionnaireOptions } from "./types.ts";
+
+export async function runQuestionnaire(
+  questionnaire: NormalizedQuestionnaire,
+  opts: RunQuestionnaireOptions,
+): Promise<AskUserOutcome | "unsupported"> {
+  if (typeof opts.ui.custom !== "function") return "unsupported";
+  return runOverlayQuestionnaire(questionnaire, opts);
+}

package/src/ui/overlay-actions.ts

@@ -0,0 +1,42 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { SelectList } from "@earendil-works/pi-tui";
+import type { AskUserController } from "../session/controller.ts";
+import { makeSelectListTheme } from "./overlay-render.ts";
+import { buildTextActionItems, type OverlayAction } from "./overlay-view.ts";
+
+export interface ActionListState {
+  entries: Array<{ action: OverlayAction; label: string }>;
+  list: SelectList | undefined;
+  index: number;
+}
+
+export function createActionList(args: {
+  controller: AskUserController;
+  theme: Theme;
+  actionIndex: number;
+  onIndexChange: (index: number) => void;
+  onAction: (action: OverlayAction) => void;
+}): ActionListState {
+  const actions = buildTextActionItems(args.controller);
+  const entries = actions.map(({ action, item }) => ({ action, label: item.label }));
+  if (actions.length === 0) {
+    return { entries, list: undefined, index: 0 };
+  }
+
+  const index = Math.max(0, Math.min(args.actionIndex, actions.length - 1));
+  const list = new SelectList(
+    actions.map(({ item }) => item),
+    Math.min(actions.length, 6),
+    makeSelectListTheme(args.theme),
+  );
+  list.onSelectionChange = (item) => {
+    const nextIndex = actions.findIndex(({ item: candidate }) => candidate.value === item.value);
+    if (nextIndex >= 0) args.onIndexChange(nextIndex);
+  };
+  list.onSelect = (item) => {
+    const action = actions.find(({ item: candidate }) => candidate.value === item.value)?.action;
+    if (action) args.onAction(action);
+  };
+  list.setSelectedIndex(index);
+  return { entries, list, index };
+}

package/src/ui/overlay-render.ts

@@ -0,0 +1,196 @@
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import {
+  type Editor,
+  type EditorTheme,
+  Markdown,
+  type SelectList,
+  type SelectListTheme,
+} 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";
+
+export interface RenderOverlayFrameArgs {
+  width: number;
+  theme: Theme;
+  controller: AskUserController;
+  mode: OverlayMode;
+  focus: FocusTarget;
+  editor: Editor;
+  choiceList: SelectList | undefined;
+  actionList: SelectList | undefined;
+  textActionLabels: string[];
+  previewText?: string;
+}
+
+export function renderOverlayFrame(args: RenderOverlayFrameArgs): string[] {
+  const lines: string[] = [];
+  lines.push(args.theme.fg("accent", "─".repeat(args.width)));
+  lines.push(...renderHeader(args));
+  lines.push(...renderPrompt(args.controller.currentQuestion.prompt, args.width));
+  lines.push("");
+  lines.push(...renderBody(args));
+  lines.push("");
+  lines.push(
+    args.theme.fg(
+      "dim",
+      footerText({
+        controller: args.controller,
+        mode: args.mode,
+        focus: args.focus,
+        hasTextActions: args.textActionLabels.length > 0,
+      }),
+    ),
+  );
+  lines.push(args.theme.fg("accent", "─".repeat(args.width)));
+  return lines;
+}
+
+export function makeEditorTheme(theme: Theme): EditorTheme {
+  return {
+    borderColor: (text) => theme.fg("accent", text),
+    selectList: makeSelectListTheme(theme),
+  };
+}
+
+export function makeSelectListTheme(theme: Theme): SelectListTheme {
+  return {
+    selectedPrefix: (text) => theme.fg("accent", text),
+    selectedText: (text) => theme.fg("accent", text),
+    description: (text) => theme.fg("muted", text),
+    scrollInfo: (text) => theme.fg("dim", text),
+    noMatch: (text) => theme.fg("warning", text),
+  };
+}
+
+export function currentPreviewText(
+  question: NormalizedQuestionnaire["questions"][number],
+  optionIndex: number,
+): string | undefined {
+  return question.type === "choice" ? question.options[optionIndex]?.preview : undefined;
+}
+
+export function currentTextValue(
+  controller: AskUserController,
+  initial: string | undefined,
+): string {
+  const answer = controller.getAnswer(controller.currentQuestion.id);
+  return answer?.kind === "text" ? answer.value : (initial ?? "");
+}
+
+export function currentCustomValue(controller: AskUserController): string {
+  const answer = controller.getAnswer(controller.currentQuestion.id);
+  return answer?.kind === "custom" ? answer.value : "";
+}
+
+export function clampIndex(index: number, length: number): number {
+  if (length === 0) return 0;
+  return Math.max(0, Math.min(index, length - 1));
+}
+
+function renderHeader(args: RenderOverlayFrameArgs): string[] {
+  const lines: string[] = [];
+  const { title, intro } = args.controller.questionnaire;
+  if (title) lines.push(args.theme.fg("accent", args.theme.bold(title)));
+  lines.push(
+    args.theme.fg(
+      "muted",
+      `${args.controller.currentIndex + 1}/${args.controller.questions.length} · ${args.controller.currentQuestion.header}`,
+    ),
+  );
+  if (intro) {
+    lines.push("");
+    lines.push(...renderPrompt(intro, args.width));
+  }
+  return lines;
+}
+
+function renderBody(args: RenderOverlayFrameArgs): string[] {
+  const question = args.controller.currentQuestion;
+  if (question.type === "text") {
+    return renderTextBody(args);
+  }
+  return renderChoiceBody(args);
+}
+
+function renderChoiceBody(args: RenderOverlayFrameArgs): string[] {
+  const leftLines = args.choiceList?.render(splitLeftWidth(args.width)) ?? [];
+
+  if (args.mode === "custom-input" || args.mode === "discuss-input") {
+    const rightLines = renderEditorLines(args, splitRightWidth(args.width));
+    if (args.width >= 100) {
+      return splitColumns({
+        width: args.width,
+        theme: args.theme,
+        leftLines,
+        rightLines,
+      });
+    }
+    return [...leftLines, "", ...rightLines];
+  }
+
+  if (args.previewText && args.width >= 100) {
+    const rightLines = [
+      args.theme.fg("accent", "Preview"),
+      "",
+      ...renderPrompt(args.previewText, splitRightWidth(args.width)),
+    ];
+    return splitColumns({
+      width: args.width,
+      theme: args.theme,
+      leftLines,
+      rightLines,
+    });
+  }
+
+  if (!args.previewText) return leftLines;
+  return [
+    ...leftLines,
+    "",
+    args.theme.fg("accent", "Preview"),
+    ...renderPrompt(args.previewText, args.width),
+  ];
+}
+
+function renderTextBody(args: RenderOverlayFrameArgs): string[] {
+  const lines = renderEditorLines(args, args.width);
+  if (args.textActionLabels.length === 0) return lines;
+
+  if (args.focus === "actions") {
+    return [...lines, "", ...(args.actionList?.render(args.width) ?? [])];
+  }
+
+  return [...lines, "", ...args.textActionLabels.map((label) => `  ${label}`)];
+}
+
+function renderEditorLines(args: RenderOverlayFrameArgs, width: number): string[] {
+  const label =
+    args.mode === "discuss-input"
+      ? "Discuss instead"
+      : args.mode === "custom-input"
+        ? "Other answer"
+        : "Your answer";
+
+  const lines = [args.theme.fg("accent", label), ...args.editor.render(Math.max(20, width - 1))];
+  const question = args.controller.currentQuestion;
+  if (question.type !== "text" || args.editor.getText()) return lines;
+
+  if (question.initial) {
+    lines.push(args.theme.fg("dim", `Initial: ${question.initial}`));
+  } else if (question.placeholder) {
+    lines.push(args.theme.fg("dim", `Placeholder: ${question.placeholder}`));
+  }
+  return lines;
+}
+
+function renderPrompt(text: string, width: number): string[] {
+  return new Markdown(text, 0, 0, getMarkdownTheme()).render(Math.max(1, width));
+}
+
+function splitLeftWidth(width: number): number {
+  return Math.max(36, Math.floor(width * 0.55));
+}
+
+function splitRightWidth(width: number): number {
+  return Math.max(24, width - splitLeftWidth(width) - 3);
+}

package/src/ui/overlay-view.ts

@@ -0,0 +1,216 @@
+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 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 ChoiceRow =
+  | { kind: "option"; optionIndex: number }
+  | { kind: "action"; action: OverlayAction };
+
+export function buildChoiceRows(
+  controller: AskUserController,
+  question: NormalizedChoiceQuestion,
+): ChoiceRow[] {
+  const rows: ChoiceRow[] = question.options.map((_option, optionIndex) => ({
+    kind: "option",
+    optionIndex,
+  }));
+  if (question.allowOther) rows.push({ kind: "action", action: "other" });
+  rows.push(
+    ...buildExceptionalActions(controller, question.required).map((action) => ({
+      kind: "action" as const,
+      action,
+    })),
+  );
+  return rows;
+}
+
+export function buildChoiceItems(
+  controller: AskUserController,
+  question: NormalizedChoiceQuestion,
+  rows: ChoiceRow[],
+): SelectItem[] {
+  const selectedIndexes = new Set(controller.getSelectedIndexes(question));
+  return rows.flatMap((row) => {
+    if (row.kind === "option") {
+      const option = question.options[row.optionIndex];
+      return option
+        ? [
+            buildOptionItem({
+              question,
+              optionIndex: row.optionIndex,
+              label: option.label,
+              description: option.description,
+              selectedIndexes,
+            }),
+          ]
+        : [];
+    }
+    return [buildActionItem(controller, question.id, row.action)];
+  });
+}
+
+export function buildTextActionItems(
+  controller: AskUserController,
+): Array<{ action: OverlayAction; item: SelectItem }> {
+  return buildExceptionalActions(controller, controller.currentQuestion.required).map((action) => ({
+    action,
+    item: {
+      value: action,
+      label: actionLabel(action),
+    },
+  }));
+}
+
+export function defaultChoiceRowIndex(
+  controller: AskUserController,
+  question: NormalizedChoiceQuestion,
+  rows: ChoiceRow[],
+): number {
+  const current = controller.getAnswer(question.id);
+  if (current?.kind === "custom") {
+    return rows.findIndex((row) => row.kind === "action" && row.action === "other");
+  }
+  if (current?.kind === "choice") {
+    const first = current.selections[0];
+    if (!first) return 0;
+    const optionIndex = question.options.findIndex((option) => option.value === first.value);
+    return optionIndex >= 0 ? optionIndex : 0;
+  }
+  return question.initialIndexes[0] ?? question.recommendedIndexes[0] ?? 0;
+}
+
+export function previewOptionIndexForRows(
+  rows: ChoiceRow[],
+  rowIndex: number,
+  fallbackOptionIndex: number,
+): number | undefined {
+  const row = rows[rowIndex];
+  if (row?.kind === "option") return row.optionIndex;
+  return fallbackOptionIndex >= 0 ? fallbackOptionIndex : undefined;
+}
+
+export function footerText(args: {
+  controller: AskUserController;
+  mode: OverlayMode;
+  focus: FocusTarget;
+  hasTextActions: boolean;
+}): string {
+  const { controller, mode, focus, hasTextActions } = args;
+  const question = controller.currentQuestion;
+
+  if (question.type === "text") {
+    if (mode === "discuss-input") return "Enter submit • Esc cancel";
+    if (focus === "editor") {
+      return hasTextActions
+        ? "Enter submit • ↓ actions • ← back • Esc cancel"
+        : "Enter submit • ← back • Esc cancel";
+    }
+    return "↑↓ move • Enter select • ↑ editor • ← back • Esc cancel";
+  }
+
+  if (mode === "custom-input" || mode === "discuss-input") {
+    return "Enter submit • Esc cancel";
+  }
+  return question.multi
+    ? "↑↓ move • Space toggle • Enter submit • ← back • Esc cancel"
+    : "↑↓ move • Space select • Enter submit • ← back • Esc cancel";
+}
+
+export function splitColumns(args: {
+  width: number;
+  theme: Theme;
+  leftLines: string[];
+  rightLines: string[];
+  leftRatio?: number;
+}): string[] {
+  const { width, theme, leftLines, rightLines, leftRatio = 0.55 } = args;
+  const leftWidth = Math.max(36, Math.floor(width * leftRatio));
+  const rightWidth = Math.max(24, width - leftWidth - 3);
+  const total = Math.max(leftLines.length, rightLines.length);
+  const lines: string[] = [];
+
+  for (let index = 0; index < total; index += 1) {
+    const left = padRight(leftLines[index] ?? "", leftWidth);
+    const right = padRight(rightLines[index] ?? "", rightWidth);
+    lines.push(`${left} ${theme.fg("accent", "│")} ${right}`);
+  }
+  return lines;
+}
+
+export function choiceRowValue(row: ChoiceRow): string {
+  return row.kind === "option" ? `option:${row.optionIndex}` : `action:${row.action}`;
+}
+
+function buildOptionItem(args: {
+  question: NormalizedChoiceQuestion;
+  optionIndex: number;
+  label: string;
+  description: string | undefined;
+  selectedIndexes: Set<number>;
+}): SelectItem {
+  const { question, optionIndex, label, description, selectedIndexes } = args;
+  const recommended = question.recommendedIndexes.includes(optionIndex) ? " (recommended)" : "";
+  const marker = question.multi
+    ? selectedIndexes.has(optionIndex)
+      ? "[x]"
+      : "[ ]"
+    : selectedIndexes.has(optionIndex)
+      ? "(*)"
+      : "( )";
+  return {
+    value: choiceRowValue({ kind: "option", optionIndex }),
+    label: `${marker} ${label}${recommended}`,
+    description,
+  };
+}
+
+function buildActionItem(
+  controller: AskUserController,
+  questionId: string,
+  action: OverlayAction,
+): SelectItem {
+  const answer = controller.getAnswer(questionId);
+  return {
+    value: choiceRowValue({ kind: "action", action }),
+    label:
+      action === "other" && answer?.kind === "custom"
+        ? `Other — ${answer.value}`
+        : actionLabel(action),
+  };
+}
+
+function buildExceptionalActions(
+  controller: AskUserController,
+  required: boolean,
+): OverlayAction[] {
+  const actions: OverlayAction[] = [];
+  if (!required) actions.push("skip");
+  if (controller.questionnaire.allowDiscuss) actions.push("discuss");
+  if (controller.canPartialSubmit()) actions.push("partial");
+  return actions;
+}
+
+function actionLabel(action: OverlayAction): string {
+  switch (action) {
+    case "other":
+      return "Other…";
+    case "skip":
+      return "Skip question";
+    case "discuss":
+      return "Discuss instead…";
+    case "partial":
+      return "Submit partial answers";
+  }
+}
+
+function padRight(text: string, width: number): string {
+  const visible = visibleWidth(text);
+  if (visible >= width) return truncateToWidth(text, width);
+  return `${text}${" ".repeat(width - visible)}`;
+}