@bastani/atomic 0.8.4-0 → 0.8.5-0

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

@@ -22,7 +22,7 @@
  *   ╰──────────────────────────────────────────╯
  *     select  ·  required  ·  How aggressively to scope the work.
  *
- *   tab next  ·  shift+tab prev  ·  ctrl+s run  ·  esc cancel
+ *   tab next  ·  shift+tab prev  ·  ctrl+enter run  ·  esc cancel
  *
  * Field-type renderers:
  *   - string / number : single-row text input with blinking cursor
@@ -40,7 +40,7 @@
 import type { WorkflowInputEntry } from "../extension/render-result.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { paint } from "./color-utils.js";
-import { truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { matchesKey, truncateToWidth, visibleWidth } from "./text-helpers.js";
 import {
   type KeybindingsLike,
   deleteRange,
@@ -75,8 +75,8 @@ export interface InputsPickerState {
   confirmOpen: boolean;
   /**
    * Set of field indices that failed validation on the most recent submit
-   * attempt. Used to dim the `ctrl+s` hint and to highlight a field if the
-   * user retries with required fields still empty.
+   * attempt. Used to dim the run hint and to highlight a field if the user
+   * retries with required fields still empty.
    */
   invalidIndices: readonly number[];
   /** Cursor offset within the focused single-line text field. */
@@ -211,8 +211,8 @@ export function coerceValues(
 
 /**
  * Return the reason why `field` is invalid for `value`, or `null` if valid.
- * Used both to flag fields on submit and to drive the dim state of the
- * `ctrl+s run` footer hint.
+ * Used both to flag fields on submit and to drive the dim state of the run
+ * key hint.
  */
 export function invalidForField(
   field: WorkflowInputEntry,
@@ -256,6 +256,158 @@ function computeInvalid(
 
 const dimSep = (theme: GraphTheme): string => paint("  ·  ", theme.dim);
 
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+function graphemes(text: string): string[] {
+  return Array.from(graphemeSegmenter.segment(text), (s) => s.segment);
+}
+
+function previousGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  let prev = 0;
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index >= c) break;
+    prev = s.index;
+  }
+  return prev;
+}
+
+function nextGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index >= c) return Math.min(text.length, s.index + s.segment.length);
+    if (s.index + s.segment.length > c) return s.index + s.segment.length;
+  }
+  return text.length;
+}
+
+function clampGraphemeOffset(text: string, caret: number): number {
+  const c = Math.max(0, Math.min(caret, text.length));
+  if (c === text.length) return c;
+  for (const s of graphemeSegmenter.segment(text)) {
+    if (s.index === c) return c;
+    if (s.index > c) break;
+  }
+  return previousGraphemeOffset(text, c);
+}
+
+function headToWidth(text: string, width: number): string {
+  if (width <= 0) return "";
+  let out = "";
+  let used = 0;
+  for (const g of graphemes(text)) {
+    const w = visibleWidth(g);
+    if (used + w > width) break;
+    out += g;
+    used += w;
+  }
+  return out;
+}
+
+function tailToWidth(text: string, width: number): string {
+  if (width <= 0) return "";
+  let out = "";
+  let used = 0;
+  const gs = graphemes(text);
+  for (let i = gs.length - 1; i >= 0; i--) {
+    const g = gs[i]!;
+    const w = visibleWidth(g);
+    if (used + w > width) break;
+    out = g + out;
+    used += w;
+  }
+  return out;
+}
+
+function isPrintableGrapheme(data: string): boolean {
+  if (data.length === 0 || data.includes("\x1b")) return false;
+  for (const ch of data) {
+    const code = ch.codePointAt(0);
+    if (code === undefined || code < 0x20 || code === 0x7f) return false;
+  }
+  return graphemes(data).length === 1;
+}
+
+interface TextLayoutLine {
+  text: string;
+  start: number;
+  end: number;
+}
+
+function layoutEditableText(raw: string, usable: number): TextLayoutLine[] {
+  const width = Math.max(1, Math.floor(usable));
+  const lines: TextLayoutLine[] = [];
+  let line = "";
+  let lineStart = 0;
+  let lineWidth = 0;
+  for (const s of graphemeSegmenter.segment(raw)) {
+    const offset = s.index;
+    const g = s.segment;
+    if (g === "\n") {
+      lines.push({ text: line, start: lineStart, end: offset });
+      line = "";
+      lineStart = offset + g.length;
+      lineWidth = 0;
+      continue;
+    }
+    const w = visibleWidth(g);
+    if (line !== "" && lineWidth + w > width) {
+      lines.push({ text: line, start: lineStart, end: offset });
+      line = "";
+      lineStart = offset;
+      lineWidth = 0;
+    }
+    line += g;
+    lineWidth += w;
+    if (lineWidth >= width) {
+      lines.push({ text: line, start: lineStart, end: offset + g.length });
+      line = "";
+      lineStart = offset + g.length;
+      lineWidth = 0;
+    }
+  }
+  lines.push({ text: line, start: lineStart, end: raw.length });
+  return lines;
+}
+
+function visualColumnAt(text: string, caret: number): number {
+  return visibleWidth(text.slice(0, clampGraphemeOffset(text, caret)));
+}
+
+function offsetAtVisualColumn(text: string, targetCol: number): number {
+  let col = 0;
+  for (const s of graphemeSegmenter.segment(text)) {
+    const w = visibleWidth(s.segment);
+    if (col + w > targetCol) return s.index;
+    col += w;
+  }
+  return text.length;
+}
+
+function caretLineUp(raw: string, caret: number): number | null {
+  const safe = clampGraphemeOffset(raw, caret);
+  const lineStartOffset = raw.lastIndexOf("\n", safe - 1) + 1;
+  if (lineStartOffset === 0) return null;
+  const prevLineEnd = lineStartOffset - 1;
+  const prevLineStart = raw.lastIndexOf("\n", prevLineEnd - 1) + 1;
+  const col = visualColumnAt(raw.slice(lineStartOffset, safe), raw.slice(lineStartOffset, safe).length);
+  const prevLine = raw.slice(prevLineStart, prevLineEnd);
+  return prevLineStart + offsetAtVisualColumn(prevLine, col);
+}
+
+function caretLineDown(raw: string, caret: number): number | null {
+  const safe = clampGraphemeOffset(raw, caret);
+  const nextNl = raw.indexOf("\n", safe);
+  if (nextNl === -1) return null;
+  const lineStartOffset = raw.lastIndexOf("\n", safe - 1) + 1;
+  const col = visualColumnAt(raw.slice(lineStartOffset, safe), raw.slice(lineStartOffset, safe).length);
+  const nextLineStart = nextNl + 1;
+  const nextNlAfter = raw.indexOf("\n", nextLineStart);
+  const nextLineEnd = nextNlAfter === -1 ? raw.length : nextNlAfter;
+  const nextLine = raw.slice(nextLineStart, nextLineEnd);
+  return nextLineStart + offsetAtVisualColumn(nextLine, col);
+}
+
 /**
  * Render a single field's three-row block: top border with title, content
  * row (variable per type), bottom border, then the caption row underneath.
@@ -377,15 +529,57 @@ function renderFieldContent(
   }
 
   if (field.type === "text") {
-    // 3-row scrolling textarea — keeps the cursor line visible.
+    // 3-row scrolling textarea — wrap by terminal cell width and keep the
+    // cursor's visual row in view. Newlines create hard row breaks.
     const ROWS = 3;
-    const allLines = raw.split("\n");
-    const start = Math.max(0, allLines.length - ROWS);
+    if (raw === "") {
+      return Array.from({ length: ROWS }, (_, i) =>
+        i === 0
+          ? renderInlineText("", focused, cursorOn, usable, theme, field.placeholder, true)
+          : 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 = focused
+      ? Math.max(0, Math.min(cursorRow - ROWS + 1, layout.length - ROWS))
+      : Math.max(0, layout.length - ROWS);
     const rows: string[] = [];
     for (let i = 0; i < ROWS; i++) {
-      const line = allLines[start + i] ?? "";
-      const isCursorLine = focused && i === Math.min(ROWS - 1, allLines.length - 1 - start);
-      rows.push(renderInlineText(line, isCursorLine, cursorOn, usable, theme, field.placeholder, raw === ""));
+      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;
   }
@@ -415,23 +609,31 @@ function renderInlineText(
     if (ph === "") {
       return padLine(showCursor ? paint("▋", theme.accent) : " ", usable);
     }
-    const first = ph.slice(0, 1);
-    const rest = ph.slice(1);
+    const [first = "", ...rest] = graphemes(ph);
     const head = showCursor
       ? paint(first, theme.bg, { bg: theme.accent })
       : paint(first, theme.dim);
-    return padLine(head + paint(rest, theme.dim), usable);
+    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 c = caret ?? value.length;
-  const safe = Math.max(0, Math.min(c, value.length));
-  const before = value.slice(0, safe);
-  const at = value.slice(safe, safe + 1);
-  const after = value.slice(safe + 1);
   const cursorCell = showCursor
     ? at !== ""
       ? paint(at, theme.bg, { bg: theme.accent })
       : paint("▋", theme.accent)
-    : at;
+    : paint(at, theme.text);
   return padLine(paint(before, theme.text) + cursorCell + paint(after, theme.text), usable);
 }
 
@@ -469,7 +671,8 @@ export function renderInputsPicker(opts: InputsPickerRenderOpts): string[] {
   // Section label with field counter (1-based). When the terminal is too
   // narrow to hold both, the counter is the priority — drop "INPUTS" first
   // so the user always knows which field they're on.
-  const counter = `${state.focusedIdx + 1} / ${fields.length}`;
+  const focusTargetCount = fields.length;
+  const counter = `${Math.min(state.focusedIdx + 1, focusTargetCount)} / ${focusTargetCount}`;
   const labelLeft =
     paint("▎ ", theme.mauve) + paint("INPUTS", theme.textMuted, { bold: true });
   const labelLen = visibleWidth(labelLeft);
@@ -498,14 +701,12 @@ export function renderInputsPicker(opts: InputsPickerRenderOpts): string[] {
     lines.push(""); // gap between fields
   }
 
-  // Footer hints — tiered for narrow widths. The widest form ends up around
-  // 57 visible cells; we step down to keys-with-labels-tight, keys-only,
-  // and finally essentials-only when the terminal cannot hold the row. The
-  // `ctrl+s` hint dims when any field is currently invalid.
   const anyInvalid = computeInvalid(fields, state.rawText).length > 0;
-  const submitColor = anyInvalid ? theme.dim : theme.text;
-  const submitLabelColor = anyInvalid ? theme.dim : theme.textMuted;
-  lines.push(renderFooterHints(width, theme, submitColor, submitLabelColor));
+
+  // Footer hints — tiered for narrow widths. The widest form ends up around
+  // 61 visible cells; we step down to keys-with-labels-tight, keys-only,
+  // and finally essentials-only when the terminal cannot hold the row.
+  lines.push(renderFooterHints(width, theme, anyInvalid));
 
   if (state.confirmOpen) {
     lines.push("");
@@ -517,47 +718,41 @@ export function renderInputsPicker(opts: InputsPickerRenderOpts): string[] {
 /**
  * Footer hint row, tier-degraded so it never wraps on resize. Tiers:
  *
- *   wide   (≥ widest):  tab next  ·  shift+tab prev  ·  ctrl+s run  ·  esc cancel
- *   medium (≥ keys):    tab  ·  shift+tab  ·  ctrl+s  ·  esc
- *   tight  (≥ short):   tab  ·  ⇧tab  ·  ⌃s  ·  esc
- *   narrow (else):      ⌃s  ·  esc
- *
- * The `ctrl+s` hint always survives — it is the only "run" affordance — and
- * `esc cancel` always survives so the user can back out.
+ *   wide   (≥ widest):  tab next  ·  shift+tab prev  ·  ctrl+enter run  ·  esc cancel
+ *   medium (≥ keys):    tab  ·  shift+tab  ·  ctrl+enter  ·  esc
+ *   tight  (≥ short):   tab  ·  ⇧tab  ·  ⌃↵  ·  esc
+ *   narrow (else):      ⌃↵  ·  esc
  */
-function renderFooterHints(
-  width: number,
-  theme: GraphTheme,
-  submitColor: string,
-  submitLabelColor: string,
-): string {
+function renderFooterHints(width: number, theme: GraphTheme, submitDisabled: boolean): string {
   const sep = dimSep(theme);
   const sepWidth = 5; // "  ·  "
-  const hint = (key: string, label: string, kc: string, lc: string): string =>
-    paint(key, kc) + " " + paint(label, lc);
-  const keyOnly = (key: string, kc: string): string => paint(key, kc);
+  const submitColor = submitDisabled ? theme.dim : theme.text;
+  const submitLabelColor = submitDisabled ? theme.dim : theme.textMuted;
+  const hint = (key: string, label: string, keyColor = theme.text, labelColor = theme.textMuted): string =>
+    paint(key, keyColor) + " " + paint(label, labelColor);
+  const keyOnly = (key: string, keyColor = theme.text): string => paint(key, keyColor);
 
   const wide = [
-    { width: 8, render: () => hint("tab", "next", theme.text, theme.textMuted) },
-    { width: 14, render: () => hint("shift+tab", "prev", theme.text, theme.textMuted) },
-    { width: 10, render: () => hint("ctrl+s", "run", submitColor, submitLabelColor) },
-    { width: 10, render: () => hint("esc", "cancel", theme.text, theme.textMuted) },
+    { width: 8, render: () => hint("tab", "Next") },
+    { width: 14, render: () => hint("shift+tab", "Prev") },
+    { width: 14, render: () => hint("ctrl+enter", "Run", submitColor, submitLabelColor) },
+    { width: 10, render: () => hint("esc", "Cancel") },
   ];
   const medium = [
-    { width: 3, render: () => keyOnly("tab", theme.text) },
-    { width: 9, render: () => keyOnly("shift+tab", theme.text) },
-    { width: 6, render: () => keyOnly("ctrl+s", submitColor) },
-    { width: 3, render: () => keyOnly("esc", theme.text) },
+    { width: 3, render: () => keyOnly("tab") },
+    { width: 9, render: () => keyOnly("shift+tab") },
+    { width: 10, render: () => keyOnly("ctrl+enter", submitColor) },
+    { width: 6, render: () => keyOnly("esc") },
   ];
   const tight = [
-    { width: 3, render: () => keyOnly("tab", theme.text) },
-    { width: 4, render: () => keyOnly("⇧tab", theme.text) },
-    { width: 2, render: () => keyOnly("⌃s", submitColor) },
-    { width: 3, render: () => keyOnly("esc", theme.text) },
+    { width: 3, render: () => keyOnly("tab") },
+    { width: 4, render: () => keyOnly("⇧tab") },
+    { width: 2, render: () => keyOnly("⌃↵", submitColor) },
+    { width: 6, render: () => keyOnly("esc") },
   ];
   const narrow = [
-    { width: 2, render: () => keyOnly("⌃s", submitColor) },
-    { width: 3, render: () => keyOnly("esc", theme.text) },
+    { width: 2, render: () => keyOnly("⌃↵", submitColor) },
+    { width: 6, render: () => keyOnly("esc") },
   ];
 
   for (const tier of [wide, medium, tight, narrow]) {
@@ -567,7 +762,7 @@ function renderFooterHints(
     }
   }
   // Truly tiny terminal — show just the run+cancel keys joined by a single space.
-  return paint("⌃s", submitColor) + " " + paint("esc", theme.text);
+  return paint("⌃↵", submitColor) + " " + paint("esc", theme.text);
 }
 
 /**
@@ -632,9 +827,9 @@ function shortVal(s: string): string {
  *   left / right     — select: cycle choices; boolean: flip; text: caret
  *   space            — boolean: flip
  *   enter            — text: newline; otherwise: next field
- *   ctrl+s           — open confirm modal (if all required filled)
+ *   ctrl+enter       — open confirm modal (if all required filled)
  *   backspace        — delete char left of caret
- *   esc              — close picker without running
+ *   esc / ctrl+c     — close picker without running
  *
  * Keys (confirm modal mode):
  *   y / enter        — run
@@ -650,7 +845,7 @@ export function handleInputsPickerInput(
     // 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 (key === "\x1b") return { kind: "cancel" };
+    if (isCancelKey(key)) return { kind: "cancel" };
     return { kind: "noop" };
   }
   if (state.confirmOpen) return handleConfirmKey(key, state, fields);
@@ -663,33 +858,21 @@ function handleFormKey(
   fields: readonly WorkflowInputEntry[],
   kb: KeybindingsLike | undefined,
 ): InputsPickerAction {
-  const field = fields[state.focusedIdx]!;
-  const name = field.name;
-  const cur = state.rawText[name] ?? "";
-
   // ── Global navigation (workflow form contract, not Pi actions) ──
-  if (key === "\x1b") return { kind: "cancel" };
-  if (key === "\t") {
+  if (isCancelKey(key)) return { kind: "cancel" };
+  if (matchesKey(key, "ctrl+enter")) return attemptPickerSubmit(state, fields);
+  if (matchesKey(key, "tab")) {
     moveFocus(state, fields, +1);
     return { kind: "noop" };
   }
-  if (key === "\x1b[Z") {
+  if (matchesKey(key, "shift+tab")) {
     moveFocus(state, fields, -1);
     return { kind: "noop" };
   }
-  if (key === "\x13") {
-    // ctrl+s — attempt submit
-    const invalid = computeInvalid(fields, state.rawText);
-    if (invalid.length > 0) {
-      state.invalidIndices = invalid;
-      state.focusedIdx = invalid[0]!;
-      state.caret = (state.rawText[fields[state.focusedIdx]!.name] ?? "").length;
-      return { kind: "noop" };
-    }
-    state.invalidIndices = [];
-    state.confirmOpen = true;
-    return { kind: "noop" };
-  }
+
+  const field = fields[state.focusedIdx]!;
+  const name = field.name;
+  const cur = state.rawText[name] ?? "";
 
   // ── Per-type edits ──
   if (field.type === "select") {
@@ -705,10 +888,24 @@ function handleFormKey(
   const caret = Math.max(0, Math.min(state.caret, cur.length));
 
   if (matchesAction(kb, key, "tui.editor.cursorUp")) {
+    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.editor.cursorDown")) {
+    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" };
   }
@@ -729,11 +926,11 @@ function handleFormKey(
     return { kind: "noop" };
   }
   if (matchesAction(kb, key, "tui.editor.cursorLeft")) {
-    state.caret = Math.max(0, caret - 1);
+    state.caret = previousGraphemeOffset(cur, caret);
     return { kind: "noop" };
   }
   if (matchesAction(kb, key, "tui.editor.cursorRight")) {
-    state.caret = Math.min(cur.length, caret + 1);
+    state.caret = nextGraphemeOffset(cur, caret);
     return { kind: "noop" };
   }
   if (matchesAction(kb, key, "tui.editor.deleteWordBackward")) {
@@ -766,7 +963,7 @@ function handleFormKey(
   }
   if (matchesAction(kb, key, "tui.editor.deleteCharBackward")) {
     if (caret > 0) {
-      const r = deleteRange(cur, caret - 1, caret, caret);
+      const r = deleteRange(cur, previousGraphemeOffset(cur, caret), caret, caret);
       state.rawText[name] = r.text;
       state.caret = r.caret;
     }
@@ -774,7 +971,7 @@ function handleFormKey(
   }
   if (matchesAction(kb, key, "tui.editor.deleteCharForward")) {
     if (caret < cur.length) {
-      const r = deleteRange(cur, caret, caret + 1, caret);
+      const r = deleteRange(cur, caret, nextGraphemeOffset(cur, caret), caret);
       state.rawText[name] = r.text;
       state.caret = r.caret;
     }
@@ -792,10 +989,11 @@ function handleFormKey(
     }
     return { kind: "noop" };
   }
-  // Printable insert.
-  if (key.length === 1 && key >= " " && key <= "~") {
+  // Printable insert. Accept exactly one grapheme cluster so CJK, emoji ZWJ
+  // sequences, and combining-mark input follow pi-tui Input semantics.
+  if (isPrintableGrapheme(key)) {
     state.rawText[name] = cur.slice(0, caret) + key + cur.slice(caret);
-    state.caret = caret + 1;
+    state.caret = caret + key.length;
     return { kind: "noop" };
   }
   return { kind: "noop" };
@@ -869,19 +1067,41 @@ function handleConfirmKey(
   if (key === "y" || key === "Y" || key === "\r" || key === "\n") {
     return { kind: "run", values: coerceValues(fields, state.rawText) };
   }
-  if (key === "n" || key === "N" || key === "\x1b") {
+  if (key === "\x03") return { kind: "cancel" };
+  if (key === "n" || key === "N" || matchesKey(key, "escape")) {
     state.confirmOpen = false;
     return { kind: "noop" };
   }
   return { kind: "noop" };
 }
 
+function isCancelKey(key: string): boolean {
+  return key === "\x03" || matchesKey(key, "escape");
+}
+
+function attemptPickerSubmit(
+  state: InputsPickerState,
+  fields: readonly WorkflowInputEntry[],
+): InputsPickerAction {
+  const invalid = computeInvalid(fields, state.rawText);
+  if (invalid.length > 0) {
+    state.invalidIndices = invalid;
+    state.focusedIdx = invalid[0]!;
+    state.caret = (state.rawText[fields[state.focusedIdx]!.name] ?? "").length;
+    return { kind: "noop" };
+  }
+  state.invalidIndices = [];
+  state.confirmOpen = true;
+  return { kind: "noop" };
+}
+
 function moveFocus(
   state: InputsPickerState,
   fields: readonly WorkflowInputEntry[],
   delta: number,
 ): void {
   const n = fields.length;
+  if (n === 0) return;
   state.focusedIdx = (state.focusedIdx + delta + n) % n;
   const next = fields[state.focusedIdx]!;
   state.caret = (state.rawText[next.name] ?? "").length;

package/dist/builtin/workflows/src/tui/layout.ts

@@ -38,7 +38,7 @@ export function computeLayout(
   opts: LayoutOpts = {},
 ): LayoutNode[] {
   const colGap = opts.colGap ?? 4;
-  const rowGap = opts.rowGap ?? 2;
+  const rowGap = opts.rowGap ?? 3;
 
   if (stages.length === 0) return [];