@bastani/atomic 0.8.31-alpha.4 → 0.9.0-alpha.1

package/dist/builtin/workflows/src/tui/inputs-picker-input.ts

@@ -0,0 +1,305 @@
+import type { WorkflowInputEntry } from "../extension/render-result.js";
+import {
+  decodePrintableKey,
+  Key,
+  matchesKey,
+} from "./text-helpers.js";
+import {
+  type KeybindingsLike,
+  TUI_ACTION,
+  deleteRange,
+  lineEnd,
+  lineStart,
+  matchesAction,
+  wordLeft,
+  wordRight,
+} from "./keybindings-adapter.js";
+import {
+  coerceValues,
+  computeInvalid,
+  type InputsPickerAction,
+  type InputsPickerState,
+} from "./inputs-picker-types.js";
+import {
+  caretLineDown,
+  caretLineUp,
+  isPrintableGrapheme,
+  nextGraphemeOffset,
+  previousGraphemeOffset,
+} from "./inputs-picker-editing.js";
+
+export function handleInputsPickerInput(
+  key: string,
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+  keybindings?: KeybindingsLike,
+): InputsPickerAction {
+  if (fields.length === 0) {
+    // Defensive: a workflow with zero declared inputs shouldn't reach the
+    // picker (we gate on `fields.length > 0` at the open() site), but if
+    // it does, treat any keystroke as a noop and let the host close us.
+    if (isCancelKey(key)) return { kind: "cancel" };
+    return { kind: "noop" };
+  }
+  return handleFormKey(key, state, fields, keybindings);
+}
+
+function handleFormKey(
+  key: string,
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+  kb: KeybindingsLike | undefined,
+): InputsPickerAction {
+  // ── Global navigation (workflow form contract, not Pi actions) ──
+  if (isCancelKey(key)) return { kind: "cancel" };
+  if (matchesKey(key, Key.tab)) {
+    moveFocus(state, fields, +1);
+    return { kind: "noop" };
+  }
+  if (matchesKey(key, Key.shift("tab"))) {
+    moveFocus(state, fields, -1);
+    return { kind: "noop" };
+  }
+  if (state.focusedIdx === fields.length) return handleSubmitKey(key, state, fields, kb);
+
+  const field = fields[state.focusedIdx]!;
+  const name = field.name;
+  const cur = state.rawText[name] ?? "";
+
+  // ── Per-type edits ──
+  if (field.type === "select") {
+    return handleSelectKey(key, field, state, fields, kb);
+  }
+  if (field.type === "boolean") {
+    return handleBooleanKey(key, field, state, fields, kb);
+  }
+
+  // string / text / number — text editing semantics. All editor-mode keys
+  // (cursor, word jump, line jump, deletions) route through Pi's
+  // KeybindingsManager so user-configured bindings work uniformly.
+  const caret = Math.max(0, Math.min(state.caret, cur.length));
+
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorUp)) {
+    if (field.type === "text") {
+      const nextCaret = caretLineUp(cur, caret);
+      if (nextCaret !== null) {
+        state.caret = nextCaret;
+        return { kind: "noop" };
+      }
+    }
+    moveFocus(state, fields, -1);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorDown)) {
+    if (field.type === "text") {
+      const nextCaret = caretLineDown(cur, caret);
+      if (nextCaret !== null) {
+        state.caret = nextCaret;
+        return { kind: "noop" };
+      }
+    }
+    moveFocus(state, fields, +1);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.cursorWordLeft")) {
+    state.caret = wordLeft(cur, caret);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.cursorWordRight")) {
+    state.caret = wordRight(cur, caret);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.cursorLineStart")) {
+    state.caret = lineStart(cur, caret);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.cursorLineEnd")) {
+    state.caret = lineEnd(cur, caret);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorLeft)) {
+    state.caret = previousGraphemeOffset(cur, caret);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorRight)) {
+    state.caret = nextGraphemeOffset(cur, caret);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.deleteWordBackward")) {
+    const start = wordLeft(cur, caret);
+    const r = deleteRange(cur, start, caret, caret);
+    state.rawText[name] = r.text;
+    state.caret = r.caret;
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.deleteWordForward")) {
+    const end = wordRight(cur, caret);
+    const r = deleteRange(cur, caret, end, caret);
+    state.rawText[name] = r.text;
+    state.caret = r.caret;
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.deleteToLineStart")) {
+    const start = lineStart(cur, caret);
+    const r = deleteRange(cur, start, caret, caret);
+    state.rawText[name] = r.text;
+    state.caret = r.caret;
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.deleteToLineEnd")) {
+    const end = lineEnd(cur, caret);
+    const r = deleteRange(cur, caret, end, caret);
+    state.rawText[name] = r.text;
+    state.caret = r.caret;
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.deleteCharBackward")) {
+    if (caret > 0) {
+      const r = deleteRange(cur, previousGraphemeOffset(cur, caret), caret, caret);
+      state.rawText[name] = r.text;
+      state.caret = r.caret;
+    }
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, "tui.editor.deleteCharForward")) {
+    if (caret < cur.length) {
+      const r = deleteRange(cur, caret, nextGraphemeOffset(cur, caret), caret);
+      state.rawText[name] = r.text;
+      state.caret = r.caret;
+    }
+    return { kind: "noop" };
+  }
+  if (
+    matchesAction(kb, key, TUI_ACTION.inputSubmit) ||
+    matchesAction(kb, key, "tui.input.newLine")
+  ) {
+    if (field.type === "text") {
+      state.rawText[name] = cur.slice(0, caret) + "\n" + cur.slice(caret);
+      state.caret = caret + 1;
+    } else {
+      moveFocus(state, fields, +1);
+    }
+    return { kind: "noop" };
+  }
+  // Printable insert. Accept raw graphemes and terminal-encoded printable
+  // keys (CSI-u / Kitty). VSCode's integrated terminal can emit printable
+  // keys as escape sequences when modifyOtherKeys is active.
+  const printable = decodePrintableKey(key) ?? key;
+  if (isPrintableGrapheme(printable)) {
+    state.rawText[name] = cur.slice(0, caret) + printable + cur.slice(caret);
+    state.caret = caret + printable.length;
+    return { kind: "noop" };
+  }
+  return { kind: "noop" };
+}
+
+function handleSelectKey(
+  key: string,
+  field: WorkflowInputEntry,
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+  kb: KeybindingsLike | undefined,
+): InputsPickerAction {
+  const choices = field.choices ?? [];
+  if (choices.length === 0) return { kind: "noop" };
+  const current = state.rawText[field.name] ?? choices[0]!;
+  const idx = Math.max(0, choices.indexOf(current));
+  if (matchesAction(kb, key, TUI_ACTION.selectUp) || matchesAction(kb, key, TUI_ACTION.editorCursorLeft)) {
+    state.rawText[field.name] = choices[(idx - 1 + choices.length) % choices.length]!;
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.selectDown) || matchesAction(kb, key, TUI_ACTION.editorCursorRight)) {
+    state.rawText[field.name] = choices[(idx + 1) % choices.length]!;
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.selectConfirm) || matchesAction(kb, key, TUI_ACTION.inputSubmit)) {
+    moveFocus(state, fields, +1);
+    return { kind: "noop" };
+  }
+  return { kind: "noop" };
+}
+
+function handleBooleanKey(
+  key: string,
+  field: WorkflowInputEntry,
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+  kb: KeybindingsLike | undefined,
+): InputsPickerAction {
+  if (
+    matchesKey(key, Key.space) ||
+    matchesAction(kb, key, TUI_ACTION.selectUp) ||
+    matchesAction(kb, key, TUI_ACTION.selectDown) ||
+    matchesAction(kb, key, TUI_ACTION.editorCursorLeft) ||
+    matchesAction(kb, key, TUI_ACTION.editorCursorRight)
+  ) {
+    state.rawText[field.name] = state.rawText[field.name] === "true" ? "false" : "true";
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.selectConfirm) || matchesAction(kb, key, TUI_ACTION.inputSubmit)) {
+    moveFocus(state, fields, +1);
+    return { kind: "noop" };
+  }
+  return { kind: "noop" };
+}
+
+function handleSubmitKey(
+  key: string,
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+  kb: KeybindingsLike | undefined,
+): InputsPickerAction {
+  if (matchesAction(kb, key, TUI_ACTION.selectUp) || matchesAction(kb, key, TUI_ACTION.editorCursorUp)) {
+    moveFocus(state, fields, -1);
+    return { kind: "noop" };
+  }
+  if (matchesAction(kb, key, TUI_ACTION.selectDown) || matchesAction(kb, key, TUI_ACTION.editorCursorDown)) {
+    moveFocus(state, fields, +1);
+    return { kind: "noop" };
+  }
+  if (
+    matchesKey(key, Key.enter) ||
+    matchesAction(kb, key, TUI_ACTION.selectConfirm) ||
+    matchesAction(kb, key, TUI_ACTION.inputSubmit)
+  ) {
+    return attemptPickerSubmit(state, fields);
+  }
+  return { kind: "noop" };
+}
+
+function isCancelKey(key: string): boolean {
+  return matchesKey(key, Key.ctrl("c")) || matchesKey(key, Key.escape);
+}
+
+function attemptPickerSubmit(
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+): InputsPickerAction {
+  const invalid = computeInvalid(fields, state.rawText);
+  if (invalid.length > 0) {
+    state.invalidIndices = invalid;
+    state.submitChoiceIdx = 0;
+    state.focusedIdx = invalid[0]!;
+    state.caret = (state.rawText[fields[state.focusedIdx]!.name] ?? "").length;
+    return { kind: "noop" };
+  }
+  state.invalidIndices = [];
+  return { kind: "run", values: coerceValues(fields, state.rawText) };
+}
+
+function moveFocus(
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+  delta: number,
+): void {
+  const n = fields.length + 1;
+  if (n <= 1) return;
+  state.focusedIdx = (state.focusedIdx + delta + n) % n;
+  if (state.focusedIdx === fields.length) {
+    state.caret = 0;
+    state.submitChoiceIdx = 0;
+    return;
+  }
+  const next = fields[state.focusedIdx]!;
+  state.caret = (state.rawText[next.name] ?? "").length;
+}

package/dist/builtin/workflows/src/tui/inputs-picker-render.ts

@@ -0,0 +1,300 @@
+import type { WorkflowInputEntry } from "../extension/render-result.js";
+import type { GraphTheme } from "./graph-theme.js";
+import { paint } from "./color-utils.js";
+import {
+  graphemes,
+  truncateToWidth,
+  visibleWidth,
+  wrapPlainText,
+} from "./text-helpers.js";
+import { renderCompactBandHeader } from "./header.js";
+import {
+  renderAskChoiceRows,
+  renderSubmitControls,
+} from "./submit-pane.js";
+import type { InputsPickerRenderOpts, InputsPickerState } from "./inputs-picker-types.js";
+import { computeInvalid, invalidForField } from "./inputs-picker-types.js";
+import {
+  clampGraphemeOffset,
+  headToWidth,
+  layoutEditableText,
+  tailToWidth,
+} from "./inputs-picker-editing.js";
+
+function renderInlineText(
+  value: string,
+  focused: boolean,
+  cursorOn: boolean,
+  usable: number,
+  theme: GraphTheme,
+  placeholder: string | undefined,
+  isEmpty: boolean,
+  caret?: number,
+): string {
+  const showCursor = focused && cursorOn;
+  if (isEmpty) {
+    const ph = placeholder ?? "";
+    if (ph === "") {
+      return padLine(showCursor ? paint("▋", theme.accent) : " ", usable);
+    }
+    const [first = "", ...rest] = graphemes(ph);
+    const head = showCursor
+      ? paint(first, theme.bg, { bg: theme.accent })
+      : paint(first, theme.dim);
+    return padLine(head + paint(rest.join(""), theme.dim), usable);
+  }
+  const safe = clampGraphemeOffset(value, caret ?? value.length);
+  const beforeFull = value.slice(0, safe);
+  const afterFull = value.slice(safe);
+  const [at = ""] = graphemes(afterFull);
+  const afterRest = at === "" ? "" : afterFull.slice(at.length);
+  const cursorPlain = showCursor ? (at !== "" ? at : "▋") : at;
+  const cursorWidth = Math.max(1, visibleWidth(cursorPlain));
+  const totalWidth = visibleWidth(beforeFull) + cursorWidth + visibleWidth(showCursor ? afterRest : afterFull.slice(at.length));
+  let before = beforeFull;
+  let after = showCursor ? afterRest : afterFull.slice(at.length);
+  if (totalWidth > usable) {
+    before = tailToWidth(beforeFull, Math.max(0, usable - cursorWidth));
+    after = headToWidth(showCursor ? afterRest : afterFull.slice(at.length), Math.max(0, usable - visibleWidth(before) - cursorWidth));
+  }
+  const cursorCell = showCursor
+    ? at !== ""
+      ? paint(at, theme.bg, { bg: theme.accent })
+      : paint("▋", theme.accent)
+    : paint(at, theme.text);
+  return padLine(paint(before, theme.text) + cursorCell + paint(after, theme.text), usable);
+}
+
+function padLine(s: string, usable: number): string {
+  // The caller appends `│` immediately after this string, so the row must
+  // fill exactly `usable` cells of visible width — otherwise the right
+  // border slides leftward and the field card looks broken-narrow under a
+  // full-width top/bottom border. Pad short content; clip overflow with `…`.
+  // visibleWidth/truncateToWidth are width-correct for CJK/emoji glyphs.
+  const len = visibleWidth(s);
+  if (len === usable) return s;
+  if (len < usable) return s + " ".repeat(usable - len);
+  return truncateToWidth(s, usable, "…", true);
+}
+
+function fitLine(line: string, width: number): string {
+  return truncateToWidth(line, Math.max(0, width), "…", true);
+}
+
+function renderWorkflowHeader(
+  workflowName: string,
+  fieldCount: number,
+  focusedIdx: number,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const current = Math.min(fieldCount, Math.max(1, focusedIdx + 1));
+  return renderCompactBandHeader({
+    label: "WORKFLOW",
+    subtitle: workflowName,
+    badges: fieldCount > 0 ? [{ text: `${current} / ${fieldCount}`, fg: theme.dim }] : [],
+    width,
+    theme,
+  });
+}
+
+function renderInputField(
+  field: WorkflowInputEntry,
+  raw: string,
+  caret: number,
+  cursorOn: boolean,
+  invalid: string | null,
+  focused: boolean,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const boxWidth = Math.max(4, width);
+  const contentWidth = Math.max(1, boxWidth - 2);
+  const borderColor = focused ? theme.accent : theme.borderDim;
+  const rows = renderAskStyleInputBody(field, raw, focused ? caret : raw.length, cursorOn, focused, theme, contentWidth);
+  const lines = [
+    renderFieldTop(field.name, boxWidth, borderColor, focused, theme),
+    ...rows.map((row) => renderFieldRow(row, contentWidth, borderColor, theme)),
+    renderFieldBottom(boxWidth, borderColor),
+    ...renderFieldMeta(field, invalid, theme, width),
+  ];
+  return lines;
+}
+
+function renderAskStyleInputBody(
+  field: WorkflowInputEntry,
+  raw: string,
+  caret: number,
+  cursorOn: boolean,
+  focused: boolean,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  if (field.type === "select" && field.choices && field.choices.length > 0) {
+    const selected = Math.max(0, field.choices.indexOf(raw));
+    return field.choices.flatMap((choice, i) =>
+      renderAskChoiceRows(i + 1, focused || i !== selected ? choice : `✓ ${choice}`, focused && i === selected, theme, width),
+    );
+  }
+
+  if (field.type === "boolean") {
+    const normalized = raw.trim().toLowerCase();
+    const hasValue = normalized.length > 0;
+    const on = normalized === "true" || normalized === "1";
+    return [
+      ...renderAskChoiceRows(1, focused || !hasValue || !on ? "on" : "✓ on", focused && hasValue && on, theme, width),
+      ...renderAskChoiceRows(2, focused || !hasValue || on ? "off" : "✓ off", focused && hasValue && !on, theme, width),
+    ];
+  }
+
+  return renderAskInputRows(field, raw, caret, cursorOn, focused, theme, width);
+}
+
+function renderAskInputRows(
+  field: WorkflowInputEntry,
+  raw: string,
+  caret: number,
+  cursorOn: boolean,
+  focused: boolean,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const usable = Math.max(1, width);
+
+  if (field.type !== "text") {
+    return [renderInlineText(raw, focused, cursorOn, usable, theme, field.placeholder, raw === "", caret)];
+  }
+
+  const ROWS = 3;
+  if (raw === "") {
+    return [
+      renderInlineText("", focused, cursorOn, usable, theme, field.placeholder, true),
+      ...Array.from({ length: ROWS - 1 }, () => padLine("", usable)),
+    ];
+  }
+
+  const layout = layoutEditableText(raw, usable);
+  const safeCaret = clampGraphemeOffset(raw, caret);
+  let cursorRow = layout.length - 1;
+  for (let i = 0; i < layout.length; i++) {
+    const line = layout[i]!;
+    const next = layout[i + 1];
+    if (safeCaret >= line.start && safeCaret < line.end) {
+      cursorRow = i;
+      break;
+    }
+    if (safeCaret === line.end) {
+      cursorRow = next?.start === safeCaret ? i + 1 : i;
+    }
+  }
+  cursorRow = Math.max(0, Math.min(cursorRow, layout.length - 1));
+  const start = Math.max(0, Math.min(cursorRow - ROWS + 1, layout.length - ROWS));
+  const rows: string[] = [];
+  for (let i = 0; i < ROWS; i++) {
+    const rowIdx = start + i;
+    const line = layout[rowIdx];
+    if (!line) {
+      rows.push(padLine("", usable));
+      continue;
+    }
+    const lineCaret = safeCaret >= line.start && safeCaret <= line.end
+      ? safeCaret - line.start
+      : line.text.length;
+    rows.push(
+      renderInlineText(
+        line.text,
+        focused && rowIdx === cursorRow,
+        cursorOn,
+        usable,
+        theme,
+        field.placeholder,
+        false,
+        lineCaret,
+      ),
+    );
+  }
+  return rows;
+}
+
+export function renderInputsPicker(opts: InputsPickerRenderOpts): string[] {
+  const { theme, workflowName, fields, state, width, cursorOn } = opts;
+  const lines: string[] = [];
+
+  lines.push(...renderWorkflowHeader(workflowName, fields.length, state.focusedIdx, theme, width));
+  lines.push("");
+
+  for (let i = 0; i < fields.length; i += 1) {
+    const field = fields[i]!;
+    const raw = state.rawText[field.name] ?? "";
+    const invalid = state.invalidIndices.includes(i)
+      ? invalidForField(field, raw, i)
+      : null;
+    lines.push(...renderInputField(field, raw, state.caret, cursorOn, invalid, state.focusedIdx === i, theme, width));
+    lines.push("");
+  }
+
+  lines.push(...renderPickerSubmitControls(fields, state, theme, width));
+
+  return lines.map((line) => fitLine(line, width));
+}
+
+function renderFieldTop(
+  title: string,
+  width: number,
+  borderColor: string,
+  focused: boolean,
+  theme: GraphTheme,
+): string {
+  const label = ` ${title} `;
+  const labelText = paint(label, focused ? theme.accent : theme.textMuted, { bold: focused });
+  const fill = Math.max(0, width - visibleWidth(label) - 2);
+  return paint("╭", borderColor) + labelText + paint("─".repeat(fill) + "╮", borderColor);
+}
+
+function renderFieldRow(row: string, contentWidth: number, borderColor: string, _theme: GraphTheme): string {
+  const clipped = truncateToWidth(row, contentWidth, "", true);
+  const padded = clipped + " ".repeat(Math.max(0, contentWidth - visibleWidth(clipped)));
+  return paint("│", borderColor) + padded + paint("│", borderColor);
+}
+
+function renderFieldBottom(width: number, borderColor: string): string {
+  return paint("╰" + "─".repeat(Math.max(0, width - 2)) + "╯", borderColor);
+}
+
+function renderFieldMeta(
+  field: WorkflowInputEntry,
+  invalid: string | null,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const required = field.required ? "required" : "optional";
+  const text = field.description && field.description.length > 0
+    ? `${field.type} · ${required} · ${field.description}`
+    : `${field.type} · ${required}`;
+  const lines = wrapPlainText(text, width).map((line) => paintRequiredMetaLine(line, field.required === true, theme));
+  if (invalid) lines.push(...wrapPlainText(invalid, width).map((line) => paint(line, theme.error)));
+  return lines;
+}
+
+function paintRequiredMetaLine(line: string, required: boolean, theme: GraphTheme): string {
+  if (!required) return paint(line, theme.textMuted);
+  return line
+    .split(/(\brequired\b)/g)
+    .map((part) => part === "required" ? paint(part, theme.warning) : paint(part, theme.textMuted))
+    .join("");
+}
+
+function renderPickerSubmitControls(
+  fields: readonly WorkflowInputEntry[],
+  state: InputsPickerState,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const invalid = computeInvalid(fields, state.rawText);
+  return renderSubmitControls({
+    invalidFieldNames: invalid.map((i) => fields[i]!.name),
+    submitFocused: state.focusedIdx === fields.length,
+    theme,
+    width,
+  });
+}