@bastani/atomic 0.8.13 → 0.8.14

package/dist/builtin/workflows/src/tui/inline-form-card.ts

@@ -1,42 +1,32 @@
 /**
  * Renderer for the inline chat-history workflow form.
  *
- * Identity mirrors the orchestrator panel:
- *   - 3-row mantle chrome band with an outlined accent pill on the left,
- *     workflow name beside it, and a `<i> / <n>` counter on the right.
- *   - One bordered "node card" per field with the field name centred inside
- *     the top border (matches the DAG node-card title slot in node-card.ts).
- *   - Caption row beneath each field card: `<type>  ·  <required|optional>
- *     ·  <description>` in dim.
- *   - 3-row mantle chrome footer with the `EDIT` mode pill and hints
- *     anchored at the bottom of the widget.
+ * Identity mirrors the multi ask_user_question dialog:
+ *   - Top/bottom dynamic border rules wrap the live form.
+ *   - A compact tab row shows each input (`■` valid / `□` missing) plus Submit,
+ *     matching the multi-question tab bar affordance.
+ *   - Every declared input is rendered on one page as a question block.
+ *   - The focused field owns the ask-style pointer/caret.
+ *   - Footer hints sit below the bottom rule, like ask_user_question hints.
  *
- *   ╭ WORKFLOW ╮  ralph                                          1 / 4
- *   │ WORKFLOW │
- *   ╰──────────╯
+ *   ───────────────────────────────────────────────────────────────────
+ *    ←  □ prompt   ■ iters   ✓ Submit  →
  *
- *   ╭───── prompt ─────────────────────────────────────────────────────╮
- *   │ build me a TUI for arg-pickers                                    │
- *   ╰──────────────────────────────────────────────────────────────────╯
- *     text  ·  required  ·  task prompt
+ *   task prompt
  *
- *   ╭───── iters ──────────────────────────────────────────────────────╮
- *   │ 5                                                                 │
- *   ╰──────────────────────────────────────────────────────────────────╯
- *     integer  ·  optional  ·  loop count
+ *   ❯ 1. build me a TUI for arg-pickers
  *
- *   ╭ EDIT ╮  tab next  ·  shift+tab prev  ·  ctrl+x run  ·  esc cancel
- *   │ EDIT │
- *   ╰──────╯
+ *   ───────────────────────────────────────────────────────────────────
+ *   Enter to select · ↑/↓ to navigate · Tab to switch input fields · Esc to cancel
  *
- * Frozen states drop all chrome — submitted and cancelled forms are
- * single-line ledger entries in the scrollback.
+ * Submitted forms become a single-line ledger entry in scrollback. Cancelled
+ * forms render no rows so cancellation leaves no chat artefact.
  *
  * The card never owns keystrokes — keystrokes are routed by the editor.
  * `renderInlineCard` is a pure function of `state + theme + width`.
  *
  * cross-ref:
- *  - src/tui/header.ts (renderOutlinePill — shared pill primitive)
+ *  - packages/coding-agent/src/core/tools/ask-user-question/view/dialog-builder.ts
  *  - src/tui/node-card.ts (centred title-in-border pattern)
  *  - src/tui/graph-view.ts (statusline + chrome band composition)
  */
@@ -44,10 +34,18 @@
 import type { InlineFormState } from "./inline-form-store.js";
 import type { WorkflowInputEntry } from "../extension/render-result.js";
 import type { GraphTheme } from "./graph-theme.js";
-import { invalidForField } from "./inputs-picker.js";
-import { renderOutlinePill } from "./header.js";
-import { BOLD, RESET, hexBg, hexToAnsi, paint } from "./color-utils.js";
-import { truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { computeInvalid } from "./inputs-picker.js";
+import { paint } from "./color-utils.js";
+import { renderCompactBandHeader } from "./header.js";
+import {
+  truncateToWidth,
+  visibleWidth,
+  wrapPlainText,
+} from "./text-helpers.js";
+import {
+  renderAskChoiceRows,
+  renderSubmitControls,
+} from "./submit-pane.js";
 
 export interface InlineCardOpts {
   width: number;
@@ -111,7 +109,7 @@ function tailToWidth(text: string, width: number): string {
 export function renderInlineCard(opts: InlineCardOpts): string[] {
   const { state, theme, width } = opts;
   if (state.status === "submitted") return [fitLine(renderSubmittedLine(state, theme), width)];
-  if (state.status === "cancelled") return [fitLine(renderCancelledLine(state, theme), width)];
+  if (state.status === "cancelled") return [];
   return renderEditingCard(opts).map((line) => fitLine(line, width));
 }
 
@@ -119,24 +117,17 @@ function renderEditingCard(opts: InlineCardOpts): string[] {
   const { state, theme, width } = opts;
   const lines: string[] = [];
 
-  lines.push(...renderHeaderBand(state, theme, width));
-  if (state.description) {
-    lines.push("  " + paint(state.description, theme.textMuted));
-  }
+  lines.push(...renderWorkflowHeader(state.workflowName, state.fields.length, state.focusedIdx, theme, width));
   lines.push("");
 
-  for (let i = 0; i < state.fields.length; i++) {
-    const f = state.fields[i]!;
-    const raw = state.rawText[f.name] ?? "";
-    const focused = i === state.focusedIdx;
-    // Don't paint a focused field as invalid — the caret is already on it,
-    // the user is fixing it now.
-    const invalid = focused ? null : invalidForField(f, raw, i);
-    lines.push(...renderFieldCard(f, raw, focused, invalid, theme, width, focused ? state.caret : undefined));
+  for (let i = 0; i < state.fields.length; i += 1) {
+    const field = state.fields[i]!;
+    const raw = state.rawText[field.name] ?? "";
+    lines.push(...renderField(field, raw, state.caret, state.focusedIdx === i, theme, width));
     lines.push("");
   }
 
-  lines.push(...renderFooterBand(theme, width));
+  lines.push(...renderFooterBand(state, theme, width));
   return lines;
 }
 
@@ -144,215 +135,148 @@ function renderEditingCard(opts: InlineCardOpts): string[] {
 // Header / footer chrome bands
 // ---------------------------------------------------------------------------
 
-const HEADER_PILL_LABEL = "WORKFLOW";
-const FOOTER_PILL_LABEL = "EDIT";
-
-function renderHeaderBand(state: InlineFormState, theme: GraphTheme, width: number): string[] {
-  const chromeBg = hexBg(theme.backgroundPanel);
-  const muted = hexToAnsi(theme.textMuted);
-  const dim = hexToAnsi(theme.dim);
-
-  const { top, mid, bot, visibleWidth: pillW } = renderOutlinePill(
-    HEADER_PILL_LABEL,
-    theme.accent,
-    chromeBg,
-  );
-
-  const nameVisible = `  ${state.workflowName}`;
-  const focusTargetCount = state.fields.length;
-  const counter = `${Math.min(state.focusedIdx + 1, focusTargetCount)} / ${focusTargetCount}`;
-  const counterVisible = counter;
-
-  const leftEdgePad = 1;
-  const rightEdgePad = 2;
-  const fillerVisible = Math.max(
-    1,
-    width - leftEdgePad - pillW - nameVisible.length - counterVisible.length - rightEdgePad,
-  );
-  const blankAcross = " ".repeat(nameVisible.length + fillerVisible + counterVisible.length + rightEdgePad);
-
-  return [
-    `${chromeBg} ${RESET}${top}${chromeBg}${blankAcross}${RESET}`,
-    `${chromeBg} ${RESET}${mid}${chromeBg}  ${muted}${state.workflowName}${RESET}${chromeBg}${" ".repeat(fillerVisible)}${dim}${counter}${RESET}${chromeBg}${" ".repeat(rightEdgePad)}${RESET}`,
-    `${chromeBg} ${RESET}${bot}${chromeBg}${blankAcross}${RESET}`,
-  ];
+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 renderFooterBand(theme: GraphTheme, width: number): string[] {
-  const chromeBg = hexBg(theme.backgroundPanel);
-  const dim = hexToAnsi(theme.dim);
-
-  const { top, mid, bot, visibleWidth: pillW } = renderOutlinePill(
-    FOOTER_PILL_LABEL,
-    theme.accent,
-    chromeBg,
-  );
+function renderFooterBand(state: InlineFormState, theme: GraphTheme, width: number): string[] {
+  return renderInlineSubmitControls(state, theme, width);
+}
 
-  const text = hexToAnsi(theme.text);
-  const muted = hexToAnsi(theme.textMuted);
-  const hints: Array<{ key: string; label: string }> = [
-    { key: "tab", label: "Next" },
-    { key: "shift+tab", label: "Prev" },
-    { key: "ctrl+x", label: "Run" },
-    { key: "esc", label: "Cancel" },
-  ];
-  const sep = `${chromeBg}  ${dim}·${RESET}${chromeBg}  `;
-  const segments = hints.map(
-    ({ key, label }) =>
-      `${text}${BOLD}${key}${RESET}${chromeBg} ${muted}${label}${RESET}${chromeBg}`,
-  );
-  const hintsStyled = segments.join(sep);
-  const hintsVisible =
-    hints.reduce((sum, h) => sum + h.key.length + 1 + h.label.length, 0) +
-    (hints.length - 1) * 5;
-
-  const leftEdgePad = 1;
-  const leadGap = 2; // gap between pill and hints, matching graph statusline
-  const rightEdgePad = 2;
-  const tailFiller = Math.max(
-    0,
-    width - leftEdgePad - pillW - leadGap - hintsVisible - rightEdgePad,
-  );
-  const blankAcross = " ".repeat(leadGap + hintsVisible + tailFiller + rightEdgePad);
+// ---------------------------------------------------------------------------
+// Field body (ask_user_question-style list/input rows)
+// ---------------------------------------------------------------------------
 
+function renderField(
+  field: WorkflowInputEntry,
+  raw: string,
+  caret: number,
+  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 = renderAskStyleFieldBody(field, raw, focused ? caret : raw.length, focused, theme, contentWidth);
   return [
-    `${chromeBg} ${RESET}${top}${chromeBg}${blankAcross}${RESET}`,
-    `${chromeBg} ${RESET}${mid}${chromeBg}${" ".repeat(leadGap)}${hintsStyled}${chromeBg}${" ".repeat(tailFiller + rightEdgePad)}${RESET}`,
-    `${chromeBg} ${RESET}${bot}${chromeBg}${blankAcross}${RESET}`,
+    renderFieldTop(field.name, boxWidth, borderColor, focused, theme),
+    ...rows.map((row) => renderFieldRow(row, contentWidth, borderColor)),
+    renderFieldBottom(boxWidth, borderColor),
+    ...renderFieldMeta(field, theme, width),
   ];
 }
 
-// ---------------------------------------------------------------------------
-// Field card (orchestrator node-card identity: centred title in top border)
-// ---------------------------------------------------------------------------
-
-function renderFieldCard(
+function renderAskStyleFieldBody(
   field: WorkflowInputEntry,
   raw: string,
+  caret: number,
   focused: boolean,
-  invalid: string | null,
   theme: GraphTheme,
   width: number,
-  caret?: number,
 ): string[] {
-  const borderHex = invalid
-    ? theme.error
-    : focused
-      ? theme.accent
-      : theme.borderDim;
-  const titleHex = borderHex;
-  const bc = hexToAnsi(borderHex);
-  const inner = Math.max(20, width - 2); // 1 col border on each side
-  const usable = inner - 2; // 1 col content padding on each side
-
-  // Centred title: ╭───── prompt ─────╮. Title text is bold, in border color.
-  const titleRaw = ` ${field.name} `;
-  const titleStart = Math.max(1, Math.floor((inner - titleRaw.length) / 2));
-  const leadDashes = "─".repeat(titleStart);
-  const tailDashes = "─".repeat(Math.max(0, inner - titleStart - titleRaw.length));
-  const top =
-    `${bc}╭${leadDashes}` +
-    `${BOLD}${hexToAnsi(titleHex)}${titleRaw}${RESET}${bc}` +
-    `${tailDashes}╮${RESET}`;
-  const bottom = `${bc}╰${"─".repeat(inner)}╯${RESET}`;
-
-  const contentLines = renderFieldContent(field, raw, focused, usable, theme, caret).map(
-    (row) => `${bc}│${RESET} ${row}${" ".repeat(Math.max(0, usable - visibleWidth(row)))} ${bc}│${RESET}`,
-  );
+  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),
+    ];
+  }
 
-  // Caption: type · required|optional · description
-  const caption = renderCaption(field, invalid, theme);
+  return renderAskInputRows(raw, caret, focused, field.placeholder, theme, width);
+}
 
-  return [top, ...contentLines, bottom, caption];
+function renderInlineSubmitControls(state: InlineFormState, theme: GraphTheme, width: number): string[] {
+  const invalid = computeInvalid(state.fields, state.rawText);
+  return renderSubmitControls({
+    invalidFieldNames: invalid.map((i) => state.fields[i]!.name),
+    submitFocused: state.focusedIdx === state.fields.length,
+    theme,
+    width,
+  });
 }
 
-function renderCaption(
-  field: WorkflowInputEntry,
-  invalid: string | null,
+function renderFieldTop(
+  title: string,
+  width: number,
+  borderColor: string,
+  focused: boolean,
   theme: GraphTheme,
 ): string {
-  const sep = paint("  ·  ", theme.dim);
-  const tagColor = invalid
-    ? theme.error
-    : field.required
-      ? theme.warning
-      : theme.dim;
-  const tagLabel = invalid ?? (field.required ? "required" : "optional");
-  const desc = field.description
-    ? sep + paint(field.description, theme.dim)
-    : "";
-  return (
-    "  " +
-    paint(field.type, theme.dim) +
-    sep +
-    paint(tagLabel, tagColor) +
-    desc
-  );
+  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 renderFieldContent(
-  field: WorkflowInputEntry,
+function renderFieldRow(row: string, contentWidth: number, borderColor: string): 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, 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}`;
+  return wrapPlainText(text, width).map((line) => paintRequiredMetaLine(line, field.required === true, theme));
+}
+
+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 renderAskInputRows(
   raw: string,
+  caret: number,
   focused: boolean,
-  usable: number,
+  placeholder: string | undefined,
   theme: GraphTheme,
-  caret?: number,
+  width: number,
 ): string[] {
-  if (field.type === "select" && field.choices && field.choices.length > 0) {
-    const cells = field.choices.map((c) => {
-      const sel = c === raw;
-      const dot = sel
-        ? paint("●", focused ? theme.accent : theme.success)
-        : paint("○", theme.dim);
-      const lbl = sel
-        ? paint(c, focused ? theme.text : theme.textMuted)
-        : paint(c, theme.dim);
-      return dot + " " + lbl;
-    });
-    return [clip(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 [clip(onCell + "   " + offCell, usable)];
-  }
-  // string / number / integer — single-line scalar input.
-  if (field.type !== "text") {
-    if (raw === "") {
-      if (focused) return [paint("▋", theme.accent)];
-      return [paint(field.placeholder ?? "", theme.dim)];
-    }
-    if (focused) {
-      return [renderCaretLine(raw, caret ?? raw.length, usable, theme, theme.text)];
-    }
-    return [clip(paint(raw, theme.textMuted), usable)];
-  }
-  // text — multi-line prompt-box input. Newlines render as actual visual
-  // line breaks (no more `⏎` glyph) and long single lines wrap at the
-  // field's usable width. The box height grows to fit every visual row
-  // so the user sees their whole prompt; the surrounding card already
-  // lives in chat scrollback so vertical space is not at a premium.
+  const usable = Math.max(1, width);
   if (raw === "") {
-    if (focused) return [paint("▋", theme.accent)];
-    return [paint(field.placeholder ?? "", theme.dim)];
+    const value = placeholder && placeholder.length > 0
+      ? paint(placeholder, theme.dim) + (focused ? cursorBlock() : "")
+      : focused ? cursorBlock() : "";
+    return [truncateToWidth(value, usable, "…", true)];
   }
-  const layout = layoutTextField(raw, usable, focused ? caret ?? raw.length : 0);
-  if (!focused) {
-    return layout.lines.map((line) => paint(line, theme.textMuted));
-  }
-  return layout.lines.map((line, row) => {
-    if (row !== layout.cursorRow) {
-      return paint(line, theme.text);
-    }
-    return renderCaretLine(line, layout.cursorOffset ?? line.length, usable, theme, theme.text);
-  });
+
+  const layout = layoutTextField(raw, usable, caret);
+  return layout.lines.map((line, row) => focused && row === layout.cursorRow
+    ? renderCaretLine(line, layout.cursorOffset ?? line.length, usable, theme, theme.text)
+    : truncateToWidth(paint(line, theme.text), usable, "…", true));
 }
 
 function renderCaretLine(
@@ -365,14 +289,17 @@ function renderCaretLine(
   const safe = clampGraphemeOffset(raw, caret);
   const beforeFull = raw.slice(0, safe);
   const afterFull = raw.slice(safe);
-  const cursorWidth = 1;
+  const [at = ""] = graphemes(afterFull);
+  const afterRest = at === "" ? "" : afterFull.slice(at.length);
+  const cursorPlain = at !== "" ? at : " ";
+  const cursorWidth = Math.max(1, visibleWidth(cursorPlain));
   let before = beforeFull;
-  let after = afterFull;
-  if (visibleWidth(beforeFull) + cursorWidth + visibleWidth(afterFull) > usable) {
+  let after = afterRest;
+  if (visibleWidth(beforeFull) + cursorWidth + visibleWidth(afterRest) > usable) {
     before = tailToWidth(beforeFull, Math.max(0, usable - cursorWidth));
-    after = headToWidth(afterFull, Math.max(0, usable - visibleWidth(before) - cursorWidth));
+    after = headToWidth(afterRest, Math.max(0, usable - visibleWidth(before) - cursorWidth));
   }
-  return clip(paint(before, color) + paint("▋", theme.accent) + paint(after, color), usable);
+  return clip(paint(before, color) + cursorBlock(cursorPlain) + paint(after, color), usable);
 }
 
 // ---------------------------------------------------------------------------
@@ -387,14 +314,6 @@ function renderSubmittedLine(state: InlineFormState, theme: GraphTheme): string
   );
 }
 
-function renderCancelledLine(state: InlineFormState, theme: GraphTheme): string {
-  return (
-    paint("✗ cancelled", theme.dim) +
-    paint("  ·  ", theme.dim) +
-    paint(state.workflowName, theme.textMuted)
-  );
-}
-
 function composeCommand(state: InlineFormState): string {
   const parts: string[] = [`/workflow ${state.workflowName}`];
   for (const f of state.fields) {
@@ -418,6 +337,10 @@ function clip(ansi: string, budget: number): string {
   return truncateToWidth(ansi, Math.max(0, budget), "…", true);
 }
 
+function cursorBlock(text = " "): string {
+  return `\x1b[7m${text}\x1b[0m`;
+}
+
 /**
  * Lay out a multi-line text field into visual rows while tracking where the
  * caret should appear on screen. Newlines (`\n`) always start a new visual