@bastani/atomic 0.8.13 → 0.8.14

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

@@ -2,47 +2,55 @@
  * Interactive argument picker for `/workflow <name>` invocations.
  *
  * Opens when the user types `/workflow <name>` in the TUI without enough
- * key=value tokens to satisfy the declared schema. Mirrors the form phase of
- * flora131/atomic's `workflow-picker-tui.tsx` design (mauve `▎` section
- * label, rounded field box per input, caption row, dim footer hints), with
- * the workflow already chosen — there is no fuzzy-list left pane.
+ * key=value tokens to satisfy the declared schema. Mirrors the
+ * `ask_user_question` dialog shape: a top rule, a compact field tab bar,
+ * one page of ask-style question rows, and dim footer hints. The workflow is
+ * already chosen, so there is no fuzzy-list pane.
  *
- *   ▎ <workflow name>
- *     <description, dim>
+ *   ───────────────────────────────────────────
+ *    ←  ■ prompt   ■ focus   ✓ Submit  →
  *
- *   ▎ INPUTS                                    <focused+1> / <total>
+ *   The high-level task to plan and execute.
  *
- *   ╭ prompt ─────────────────────────────────╮
- *   │ Build me a TUI for…                      │
- *   ╰──────────────────────────────────────────╯
- *     text  ·  required  ·  The high-level task to plan and execute.
+ *   ❯ 1. Build me a TUI for…
  *
- *   ╭ focus ──────────────────────────────────╮
- *   │ ● minimal   ○ standard   ○ exhaustive    │
- *   ╰──────────────────────────────────────────╯
- *     select  ·  required  ·  How aggressively to scope the work.
- *
- *   tab next  ·  shift+tab prev  ·  ctrl+x run  ·  esc cancel
+ *   ───────────────────────────────────────────
+ *   Enter to select · ↑/↓ to navigate · Tab to switch input fields · Esc to cancel
  *
  * Field-type renderers:
- *   - string / number : single-row text input with blinking cursor
- *   - text            : 3-row scrolling textarea (multi-line input)
- *   - boolean         : on/off toggle (space flips)
- *   - select          : radio row, ←/→ cycles choices
+ *   - string / number : single-row ask-style input with blinking cursor
+ *   - text            : 3-row scrolling ask-style textarea
+ *   - boolean         : vertical on/off choice list (space flips)
+ *   - select          : vertical choice list, ←/→ cycles choices
  *
  * cross-ref:
  *   - flora131/atomic research/designs/workflow-picker-tui.tsx (PROMPT phase)
  *   - flora131/atomic packages/atomic-sdk/src/components/workflow-picker-panel.tsx
  *   - src/tui/session-picker.ts (sibling overlay; same chrome + key style)
- *   - DESIGN.md §1 Iconography (mauve `▎` for section labels)
+ *   - DESIGN.md §5 Section Labels
  */
 
 import type { WorkflowInputEntry } from "../extension/render-result.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { paint } from "./color-utils.js";
-import { decodePrintableKey, matchesKey, truncateToWidth, visibleWidth } from "./text-helpers.js";
+import {
+  decodePrintableKey,
+  graphemes,
+  graphemeSegments,
+  Key,
+  matchesKey,
+  truncateToWidth,
+  visibleWidth,
+  wrapPlainText,
+} from "./text-helpers.js";
+import { renderCompactBandHeader } from "./header.js";
+import {
+  renderAskChoiceRows,
+  renderSubmitControls,
+} from "./submit-pane.js";
 import {
   type KeybindingsLike,
+  TUI_ACTION,
   deleteRange,
   lineEnd,
   lineStart,
@@ -71,8 +79,8 @@ export interface InputsPickerState {
    * `coerceValues()` converts these into typed objects at submit time.
    */
   rawText: Record<string, string>;
-  /** True while the confirmation modal is on top of the form. */
-  confirmOpen: boolean;
+  /** Reserved for older form snapshots; Submit is now a single final action. */
+  submitChoiceIdx: number;
   /**
    * Set of field indices that failed validation on the most recent submit
    * attempt. Used to dim the run hint and to highlight a field if the user
@@ -93,8 +101,6 @@ export interface InputsPickerRenderOpts {
   width: number;
   theme: GraphTheme;
   workflowName: string;
-  /** Optional one-line description shown directly under the workflow chip. */
-  description?: string;
   fields: readonly WorkflowInputEntry[];
   state: InputsPickerState;
   /** True when the blinking cursor is in its visible half-period. */
@@ -144,7 +150,7 @@ export function createInputsPickerState(
   return {
     focusedIdx,
     rawText,
-    confirmOpen: false,
+    submitChoiceIdx: 0,
     invalidIndices: [],
     caret: (rawText[fields[focusedIdx]?.name ?? ""] ?? "").length,
   };
@@ -238,7 +244,7 @@ export function invalidForField(
   return null;
 }
 
-function computeInvalid(
+export function computeInvalid(
   fields: readonly WorkflowInputEntry[],
   raw: Record<string, string>,
 ): number[] {
@@ -254,18 +260,10 @@ function computeInvalid(
 // Renderer
 // ---------------------------------------------------------------------------
 
-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)) {
+  for (const s of graphemeSegments(text)) {
     if (s.index >= c) break;
     prev = s.index;
   }
@@ -274,7 +272,7 @@ function previousGraphemeOffset(text: string, caret: number): number {
 
 function nextGraphemeOffset(text: string, caret: number): number {
   const c = Math.max(0, Math.min(caret, text.length));
-  for (const s of graphemeSegmenter.segment(text)) {
+  for (const s of graphemeSegments(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;
   }
@@ -284,7 +282,7 @@ function nextGraphemeOffset(text: string, caret: number): number {
 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)) {
+  for (const s of graphemeSegments(text)) {
     if (s.index === c) return c;
     if (s.index > c) break;
   }
@@ -340,7 +338,7 @@ function layoutEditableText(raw: string, usable: number): TextLayoutLine[] {
   let line = "";
   let lineStart = 0;
   let lineWidth = 0;
-  for (const s of graphemeSegmenter.segment(raw)) {
+  for (const s of graphemeSegments(raw)) {
     const offset = s.index;
     const g = s.segment;
     if (g === "\n") {
@@ -376,7 +374,7 @@ function visualColumnAt(text: string, caret: number): number {
 
 function offsetAtVisualColumn(text: string, targetCol: number): number {
   let col = 0;
-  for (const s of graphemeSegmenter.segment(text)) {
+  for (const s of graphemeSegments(text)) {
     const w = visibleWidth(s.segment);
     if (col + w > targetCol) return s.index;
     col += w;
@@ -416,178 +414,6 @@ function caretLineDown(raw: string, caret: number): number | null {
  * Exported so the chat-history mirror (inline-form-card) renders fields
  * identically to this overlay — single source of truth for the field shape.
  */
-export function renderField(
-  field: WorkflowInputEntry,
-  raw: string,
-  focused: boolean,
-  caret: number,
-  cursorOn: boolean,
-  invalid: string | null,
-  theme: GraphTheme,
-  width: number,
-): string[] {
-  // Border + label colour pick. Focused fields use `accent` (blue); a field
-  // that's currently flagged as invalid AFTER a submit attempt uses
-  // `error` to draw the eye.
-  const borderColor = invalid && !focused
-    ? theme.error
-    : focused
-      ? theme.accent
-      : theme.borderDim;
-
-  const innerWidth = Math.max(10, width - 4); // 2 chars of border + 1 pad each side
-  const top =
-    paint("╭ ", borderColor) +
-    paint(field.name, focused ? theme.text : theme.textMuted, { bold: focused }) +
-    " " +
-    paint("─".repeat(Math.max(0, innerWidth - field.name.length - 2)) + "╮", borderColor);
-  const bottom = paint("╰" + "─".repeat(innerWidth) + "╯", borderColor);
-
-  // Content row — branch per type.
-  const contentInner = renderFieldContent(
-    field,
-    raw,
-    focused,
-    caret,
-    cursorOn,
-    innerWidth,
-    theme,
-  );
-  const lines: string[] = [];
-  lines.push(top);
-  for (const inner of contentInner) {
-    lines.push(paint("│ ", borderColor) + inner + paint(" │", borderColor));
-  }
-  lines.push(bottom);
-
-  // Caption row — type · required|optional · description / invalid reason.
-  // Composed at full length, then ANSI-clipped to the terminal width so it
-  // never overflows into a second row regardless of how narrow the terminal
-  // gets. On overflow the rightmost cell becomes `…`.
-  const tagColour = invalid
-    ? theme.error
-    : field.required
-      ? theme.warning
-      : theme.dim;
-  const tagLabel = invalid ?? (field.required ? "required" : "optional");
-  const caption =
-    "  " +
-    paint(field.type, theme.dim) +
-    dimSep(theme) +
-    paint(tagLabel, tagColour) +
-    (field.description ? dimSep(theme) + paint(field.description, theme.dim) : "");
-  lines.push(truncateToWidth(caption, width, "…", true));
-  return lines;
-}
-
-/**
- * Return the inner content rows of a field, sized to fit `innerWidth - 2`
- * (the border + padding consume 4 cells total). Text fields are 3 rows
- * tall; all others are a single row.
- */
-function renderFieldContent(
-  field: WorkflowInputEntry,
-  raw: string,
-  focused: boolean,
-  caret: number,
-  cursorOn: boolean,
-  innerWidth: number,
-  theme: GraphTheme,
-): string[] {
-  const usable = innerWidth - 2; // padding on both sides
-
-  if (field.type === "select" && field.choices && field.choices.length > 0) {
-    const cells = field.choices.map((choice) => {
-      const sel = choice === raw;
-      const marker = sel ? "●" : "○";
-      const markerColor = sel
-        ? focused
-          ? theme.accent
-          : theme.success
-        : theme.dim;
-      const textColor = sel
-        ? focused
-          ? theme.text
-          : theme.textMuted
-        : theme.dim;
-      return paint(marker, markerColor) + " " + paint(choice, textColor);
-    });
-    return [padLine(cells.join("   "), usable)];
-  }
-
-  if (field.type === "boolean") {
-    const on = raw === "true";
-    const onCell =
-      paint(on ? "●" : "○", on ? theme.accent : theme.dim) +
-      " " +
-      paint("on", on ? theme.text : theme.dim);
-    const offCell =
-      paint(!on ? "●" : "○", !on ? theme.accent : theme.dim) +
-      " " +
-      paint("off", !on ? theme.text : theme.dim);
-    return [padLine(onCell + "   " + offCell, usable)];
-  }
-
-  if (field.type === "text") {
-    // 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;
-    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 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;
-  }
-
-  // string / number / integer / default — single-line input.
-  return [renderInlineText(raw, focused, cursorOn, usable, theme, field.placeholder, raw === "", caret)];
-}
-
 /**
  * Render a single editable line. When `value` is empty and the field is
  * focused, paint a dim placeholder with the cursor sitting on its first
@@ -649,166 +475,226 @@ function padLine(s: string, usable: number): string {
   return truncateToWidth(s, usable, "…", true);
 }
 
-export function renderInputsPicker(opts: InputsPickerRenderOpts): string[] {
-  const { theme, workflowName, description, fields, state, width, cursorOn } = opts;
-  const lines: string[] = [];
+function fitLine(line: string, width: number): string {
+  return truncateToWidth(line, Math.max(0, width), "…", true);
+}
 
-  // Header chip — name + description, matching atomic's locked-in chip.
-  // Both rows are clipped to terminal width so a long workflow name or
-  // description cannot push the picker into a wrap on narrow terminals.
-  const chipPrefix = paint("▎ ", theme.mauve);
-  const nameBudget = Math.max(0, width - 2);
-  lines.push(
-    chipPrefix +
-      paint(truncateToWidth(workflowName, nameBudget, "…"), theme.text, { bold: true }),
-  );
-  if (description) {
-    const descBudget = Math.max(0, width - 2);
-    lines.push("  " + paint(truncateToWidth(description, descBudget, "…"), theme.textMuted));
+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),
+    );
   }
-  lines.push("");
 
-  // 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 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);
-  if (labelLen + 1 + counter.length <= width) {
-    const pad = width - labelLen - counter.length;
-    lines.push(labelLeft + " ".repeat(pad) + paint(counter, theme.dim));
-  } else if (counter.length + 2 <= width) {
-    // Just the chip + counter, right-aligned.
-    const pad = Math.max(0, width - 2 - counter.length);
-    lines.push(chipPrefix + " ".repeat(pad) + paint(counter, theme.dim));
-  } else {
-    // Truly tiny — counter only, clipped.
-    lines.push(paint(truncateToWidth(counter, width, "…"), theme.dim));
+  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("");
 
-  // Field blocks.
-  for (let i = 0; i < fields.length; i++) {
-    const f = fields[i]!;
-    const raw = state.rawText[f.name] ?? "";
-    const focused = i === state.focusedIdx && !state.confirmOpen;
+  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(f, raw, i)
+      ? invalidForField(field, raw, i)
       : null;
-    lines.push(...renderField(f, raw, focused, state.caret, cursorOn, invalid, theme, width));
-    lines.push(""); // gap between fields
+    lines.push(...renderInputField(field, raw, state.caret, cursorOn, invalid, state.focusedIdx === i, theme, width));
+    lines.push("");
   }
 
-  const anyInvalid = computeInvalid(fields, state.rawText).length > 0;
+  lines.push(...renderPickerSubmitControls(fields, state, theme, width));
 
-  // 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));
+  return lines.map((line) => fitLine(line, width));
+}
 
-  if (state.confirmOpen) {
-    lines.push("");
-    lines.push(...renderConfirmCard(opts));
-  }
-  return lines;
+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);
 }
 
-/**
- * Footer hint row, tier-degraded so it never wraps on resize. Tiers:
- *
- *   wide   (≥ widest):  tab next  ·  shift+tab prev  ·  ctrl+x run  ·  esc cancel
- *   medium (≥ keys):    tab  ·  shift+tab  ·  ctrl+x  ·  esc
- *   tight  (≥ short):   tab  ·  ⇧tab  ·  ctrl+x  ·  esc
- *   narrow (else):      ctrl+x  ·  esc
- */
-function renderFooterHints(width: number, theme: GraphTheme, submitDisabled: boolean): string {
-  const sep = dimSep(theme);
-  const sepWidth = 5; // "  ·  "
-  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);
+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);
+}
 
-  const wide = [
-    { width: 8, render: () => hint("tab", "Next") },
-    { width: 14, render: () => hint("shift+tab", "Prev") },
-    { width: 10, render: () => hint("ctrl+x", "Run", submitColor, submitLabelColor) },
-    { width: 10, render: () => hint("esc", "Cancel") },
-  ];
-  const medium = [
-    { width: 3, render: () => keyOnly("tab") },
-    { width: 9, render: () => keyOnly("shift+tab") },
-    { width: 6, render: () => keyOnly("ctrl+x", submitColor) },
-    { width: 6, render: () => keyOnly("esc") },
-  ];
-  const tight = [
-    { width: 3, render: () => keyOnly("tab") },
-    { width: 4, render: () => keyOnly("⇧tab") },
-    { width: 6, render: () => keyOnly("ctrl+x", submitColor) },
-    { width: 6, render: () => keyOnly("esc") },
-  ];
-  const narrow = [
-    { width: 6, render: () => keyOnly("ctrl+x", submitColor) },
-    { width: 6, render: () => keyOnly("esc") },
-  ];
+function renderFieldBottom(width: number, borderColor: string): string {
+  return paint("╰" + "─".repeat(Math.max(0, width - 2)) + "╯", borderColor);
+}
 
-  for (const tier of [wide, medium, tight, narrow]) {
-    const total = tier.reduce((s, h) => s + h.width, 0) + (tier.length - 1) * sepWidth;
-    if (total <= width) {
-      return tier.map((h) => h.render()).join(sep);
-    }
-  }
-  // Truly tiny terminal — show just the run+cancel keys joined by a single space.
-  return paint("ctrl+x", submitColor) + " " + paint("esc", theme.text);
+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;
 }
 
-/**
- * Centered "ready to run" card that shows the composed slash invocation.
- * Returns an array of lines so the caller can splat into the master list
- * and each row is clipped to terminal width on its own.
- */
-function renderConfirmCard(opts: InputsPickerRenderOpts): string[] {
-  const { theme, workflowName, fields, state, width } = opts;
-  const values = coerceValues(fields, state.rawText);
-  const head =
-    paint("✓ ", theme.success) +
-    paint("ready to run", theme.text, { bold: true });
-  const cmdParts: string[] = [
-    paint("/workflow ", theme.dim) + paint(workflowName, theme.text),
-  ];
-  for (const f of fields) {
-    if (values[f.name] === undefined) continue;
-    const shown = shortVal(String(state.rawText[f.name] ?? ""));
-    cmdParts.push(
-      paint("  ", theme.dim) +
-        paint(f.name, theme.text) +
-        paint("=", theme.dim) +
-        paint(shown, theme.text),
-    );
-  }
-  const prompt =
-    paint("submit this workflow?  ", theme.dim) +
-    paint("y", theme.success, { bold: true }) +
-    paint(" submit", theme.dim) +
-    paint("  ·  ", theme.dim) +
-    paint("n", theme.error, { bold: true }) +
-    paint(" cancel", theme.dim);
-  return [
-    truncateToWidth(head, width, "…", true),
-    "",
-    ...cmdParts.map((row) => truncateToWidth(row, width, "…", true)),
-    "",
-    truncateToWidth(prompt, width, "…", true),
-  ];
+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 shortVal(s: string): string {
-  const trimmed = s.replace(/\n/g, " ").trim();
-  if (trimmed.length > 48) return trimmed.slice(0, 45) + "…";
-  return trimmed.length === 0 ? "<empty>" : trimmed;
+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,
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -822,18 +708,17 @@ function shortVal(s: string): string {
  * with the coerced typed value map.
  *
  * Keys (form mode):
- *   tab / down       — next field
- *   shift+tab / up   — previous field
+ *   tab              — switch input fields, then the final Submit action
+ *   shift+tab        — previous input field / final Submit action
  *   left / right     — select: cycle choices; boolean: flip; text: caret
  *   space            — boolean: flip
  *   enter            — text: newline; otherwise: next field
- *   ctrl+x       — open confirm modal (if all required filled)
  *   backspace        — delete char left of caret
  *   esc / ctrl+c     — close picker without running
  *
- * Keys (confirm modal mode):
- *   y / enter        — run
- *   n / esc          — back to form
+ * Keys (Submit action):
+ *   up / down        — move back into the question list
+ *   enter            — submit immediately, or focus the first invalid field
  */
 export function handleInputsPickerInput(
   key: string,
@@ -848,7 +733,6 @@ export function handleInputsPickerInput(
     if (isCancelKey(key)) return { kind: "cancel" };
     return { kind: "noop" };
   }
-  if (state.confirmOpen) return handleConfirmKey(key, state, fields);
   return handleFormKey(key, state, fields, keybindings);
 }
 
@@ -860,15 +744,15 @@ function handleFormKey(
 ): InputsPickerAction {
   // ── Global navigation (workflow form contract, not Pi actions) ──
   if (isCancelKey(key)) return { kind: "cancel" };
-  if (matchesKey(key, "ctrl+x")) return attemptPickerSubmit(state, fields);
-  if (matchesKey(key, "tab")) {
+  if (matchesKey(key, Key.tab)) {
     moveFocus(state, fields, +1);
     return { kind: "noop" };
   }
-  if (matchesKey(key, "shift+tab")) {
+  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;
@@ -887,7 +771,7 @@ function handleFormKey(
   // KeybindingsManager so user-configured bindings work uniformly.
   const caret = Math.max(0, Math.min(state.caret, cur.length));
 
-  if (matchesAction(kb, key, "tui.editor.cursorUp")) {
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorUp)) {
     if (field.type === "text") {
       const nextCaret = caretLineUp(cur, caret);
       if (nextCaret !== null) {
@@ -898,7 +782,7 @@ function handleFormKey(
     moveFocus(state, fields, -1);
     return { kind: "noop" };
   }
-  if (matchesAction(kb, key, "tui.editor.cursorDown")) {
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorDown)) {
     if (field.type === "text") {
       const nextCaret = caretLineDown(cur, caret);
       if (nextCaret !== null) {
@@ -925,11 +809,11 @@ function handleFormKey(
     state.caret = lineEnd(cur, caret);
     return { kind: "noop" };
   }
-  if (matchesAction(kb, key, "tui.editor.cursorLeft")) {
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorLeft)) {
     state.caret = previousGraphemeOffset(cur, caret);
     return { kind: "noop" };
   }
-  if (matchesAction(kb, key, "tui.editor.cursorRight")) {
+  if (matchesAction(kb, key, TUI_ACTION.editorCursorRight)) {
     state.caret = nextGraphemeOffset(cur, caret);
     return { kind: "noop" };
   }
@@ -978,7 +862,7 @@ function handleFormKey(
     return { kind: "noop" };
   }
   if (
-    matchesAction(kb, key, "tui.input.submit") ||
+    matchesAction(kb, key, TUI_ACTION.inputSubmit) ||
     matchesAction(kb, key, "tui.input.newLine")
   ) {
     if (field.type === "text") {
@@ -1012,19 +896,15 @@ function handleSelectKey(
   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.editor.cursorLeft")) {
+  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.editor.cursorRight")) {
+  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.editor.cursorUp")) {
-    moveFocus(state, fields, -1);
-    return { kind: "noop" };
-  }
-  if (matchesAction(kb, key, "tui.editor.cursorDown")) {
+  if (matchesAction(kb, key, TUI_ACTION.selectConfirm) || matchesAction(kb, key, TUI_ACTION.inputSubmit)) {
     moveFocus(state, fields, +1);
     return { kind: "noop" };
   }
@@ -1039,46 +919,48 @@ function handleBooleanKey(
   kb: KeybindingsLike | undefined,
 ): InputsPickerAction {
   if (
-    matchesKey(key, "space") ||
-    matchesAction(kb, key, "tui.input.submit") ||
-    matchesAction(kb, key, "tui.editor.cursorLeft") ||
-    matchesAction(kb, key, "tui.editor.cursorRight")
+    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.editor.cursorUp")) {
-    moveFocus(state, fields, -1);
-    return { kind: "noop" };
-  }
-  if (matchesAction(kb, key, "tui.editor.cursorDown")) {
+  if (matchesAction(kb, key, TUI_ACTION.selectConfirm) || matchesAction(kb, key, TUI_ACTION.inputSubmit)) {
     moveFocus(state, fields, +1);
     return { kind: "noop" };
   }
   return { kind: "noop" };
 }
 
-function handleConfirmKey(
+function handleSubmitKey(
   key: string,
   state: InputsPickerState,
   fields: readonly WorkflowInputEntry[],
+  kb: KeybindingsLike | undefined,
 ): InputsPickerAction {
-  // Confirm-modal answers are single-char prompts (`y`/`n`) plus the form's
-  // raw esc/enter contract. These do not flow through Pi action ids because
-  // they're a confirmation-modal contract, not an editor-mode action.
-  if (key === "y" || key === "Y" || matchesKey(key, "enter")) {
-    return { kind: "run", values: coerceValues(fields, state.rawText) };
+  if (matchesAction(kb, key, TUI_ACTION.selectUp) || matchesAction(kb, key, TUI_ACTION.editorCursorUp)) {
+    moveFocus(state, fields, -1);
+    return { kind: "noop" };
   }
-  if (matchesKey(key, "ctrl+c")) return { kind: "cancel" };
-  if (key === "n" || key === "N" || matchesKey(key, "escape")) {
-    state.confirmOpen = false;
+  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, "ctrl+c") || matchesKey(key, "escape");
+  return matchesKey(key, Key.ctrl("c")) || matchesKey(key, Key.escape);
 }
 
 function attemptPickerSubmit(
@@ -1088,13 +970,13 @@ function attemptPickerSubmit(
   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 = [];
-  state.confirmOpen = true;
-  return { kind: "noop" };
+  return { kind: "run", values: coerceValues(fields, state.rawText) };
 }
 
 function moveFocus(
@@ -1102,9 +984,14 @@ function moveFocus(
   fields: readonly WorkflowInputEntry[],
   delta: number,
 ): void {
-  const n = fields.length;
-  if (n === 0) return;
+  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;
 }