@bastani/atomic 0.8.13-0 → 0.8.14-0

package/dist/builtin/workflows/src/tui/status-helpers.ts

@@ -28,6 +28,8 @@ export function statusColor(
       return theme.error;
     case "blocked":
       return theme.dim;
+    case "skipped":
+      return theme.dim;
     case "pending":
     default:
       return theme.dim;
@@ -41,6 +43,8 @@ export function statusIcon(status: StageStatus | RunStatus): string {
       return "○";
     case "blocked":
       return "↑";
+    case "skipped":
+      return "⊘";
     case "running":
       return "●";
     case "paused":

package/dist/builtin/workflows/src/tui/status-list.ts

@@ -1,19 +1,19 @@
 /**
- * `/workflow status` list — chat-surface vocabulary from ui/mockups.html.
+ * `/workflow status` list — rounded workflow-tool output surface.
  *
- * Visual contract (ui/mockups.html §2 · DESIGN.md §5):
- *  - One full-width `[ BACKGROUND ]` flat band with subtitle and badges.
- *  - One **card** per run (replaces the indented per-stage rows):
- *      row 1: ▎ stripe · [tag runId] · bold workflow · ● state badge
- *      row 2: ▎ stripe · mode · progress strip · meta
- *  - Status colour is carried by the stripe, the tag, and the trailing
- *    badge — never by body text.
+ * Visual contract (DESIGN.md §5):
+ *  - One rounded `BACKGROUND` panel with subtitle and count badges.
+ *  - One rounded card per run (replaces the indented per-stage rows):
+ *      title: runId · workflow · state badge
+ *      row 1: mode · progress strip · meta
+ *  - Status colour is carried by the card border and state badge semantics,
+ *    never by decorative body text.
  *  - One trailing hint row pointing at `/workflow status <id>` for the
  *    most-recently-active run; full per-stage detail moves into
  *    `/workflow status <id>` ({@link renderRunDetail}).
  *
- * Plain mode (theme omitted) preserves the shape: `▎ [ BACKGROUND ]`
- * band, `│  [tag] title` cards, ASCII bracket cells `[✓][●][○][✗]`.
+ * Plain mode (theme omitted) preserves the rounded panel/card shape without
+ * ANSI escapes, with ASCII bracket cells `[✓][●][○][✗]`.
  *
  * Powers:
  *   - `renderResult({ action: "status" })` (LLM tool path)
@@ -31,15 +31,14 @@ import { elapsedRunMs, elapsedStageMs } from "../shared/timing.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { fmtDuration } from "./status-helpers.js";
 import {
-  renderFlatBand,
-  renderTaggedCard,
   renderHintRows,
+  renderRoundedBox,
   progressStrip,
   ELLIPSIS,
   chatWidth,
 } from "./chat-surface.js";
 import type { FlatBandBadge } from "./chat-surface.js";
-import { hexToAnsi, RESET } from "./color-utils.js";
+import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
 import { visibleWidth, truncateToWidth } from "./text-helpers.js";
 
 const SHORT_ID_LEN = 6;
@@ -58,15 +57,16 @@ export interface RenderStatusListOpts {
 }
 
 /**
- * Render a list of run snapshots as the canonical `[ BACKGROUND ]` chat
- * surface: one band plus one card per run.
+ * Render a list of run snapshots as the canonical rounded `BACKGROUND`
+ * surface: one panel plus one card per run.
  */
 export function renderStatusList(
   runs: readonly RunSnapshot[],
   opts: RenderStatusListOpts = {},
 ): string {
   const now = opts.now ?? Date.now();
-  const width = opts.width;
+  const width = effectiveWidth(opts.width);
+  const cardWidth = Math.max(20, width - 4);
 
   // The list shows active + recently-ended runs together. Sorting:
   // active first, then ended, each bucket by startedAt desc.
@@ -79,99 +79,80 @@ export function renderStatusList(
     ? themedBadges(counts, opts.theme)
     : plainBadges(counts);
 
-  const lines: string[] = [];
-  lines.push(renderFlatBand({
-    label: "BACKGROUND",
-    subtitle,
-    badges,
-    theme: opts.theme,
-    width,
-  }));
-  // Blank line after the band — same header-vs-content separation used by
-  // /workflow list. Without it the band visually fuses into the first card.
-  lines.push("");
+  const body: string[] = [];
 
   if (sorted.length === 0) {
-    lines.push(emptyStateLine(opts.theme));
-    return lines.join("\n");
-  }
-
-  // Blank line between run cards mirrors the mockup's per-card top/bottom
-  // margin (ui/mockups.html §2). Without it five runs collapse into one
-  // visual block.
-  for (let i = 0; i < sorted.length; i++) {
-    if (i > 0) lines.push("");
-    lines.push(renderRunCard(sorted[i]!, now, width, opts.theme));
+    body.push(` ${emptyStateLine(opts.theme)} `);
+  } else {
+    for (let i = 0; i < sorted.length; i++) {
+      if (i > 0) body.push("");
+      body.push(...renderRunEntry(sorted[i]!, now, cardWidth, opts.theme));
+    }
   }
 
   if (opts.showDetailHint !== false && sorted.length > 0) {
     const sid = shortId(sorted[0]!.id);
-    lines.push("");
-    lines.push(
-      renderHintRows(
+    body.push("");
+    body.push(
+      ...renderHintRows(
         [{ command: `/workflow status ${sid}`, hint: "drill into a run" }],
         opts.theme,
-      ),
+      ).split("\n").map((line) => ` ${line} `),
     );
   }
 
-  return lines.join("\n");
+  const badgeText = badges && badges.length > 0 ? `  ${badges.map((b) => b.text).join("  ")}` : "";
+  return renderRoundedBox({
+    title: `BACKGROUND  ${subtitle}${badgeText}`,
+    bodyLines: body,
+    theme: opts.theme,
+    width,
+  });
 }
 
 // ---------------------------------------------------------------------------
 // Run card
 // ---------------------------------------------------------------------------
 
-function renderRunCard(
+function renderRunEntry(
   run: RunSnapshot,
   now: number,
-  width: number | undefined,
+  width: number,
   theme?: GraphTheme,
-): string {
+): string[] {
   const sid = shortId(run.id);
-  const stateAccent = runAccent(run, theme);
   const trailing = runTrailing(run, theme);
-
   const mode = run.stages.length > 1 ? "chain " : "single";
-  // Row 2 budget: the card body row sits past the stripe (3 cells) and
-  // shares its width with a mode label, the progress strip, and a meta
-  // tail. Reserve ~3 cells for the meta separator and ellipsis padding.
-  const cardWidth = effectiveWidth(width);
-  const stripPrefixW = 4; // leading chat pad + "▎  "
-  const modeW = mode.length + 4; // 4-space separator after mode
-  const interior = cardWidth - stripPrefixW;
+  const bodyWidth = effectiveWidth(width);
+  const interior = Math.max(8, bodyWidth - 4);
   const rawMeta = runCardMeta(run, now);
-  // Row 2 is caller-rendered body content; clamp the metadata tail before it
-  // reaches renderTaggedCard so long/wide stage names cannot overflow.
+  const modeW = mode.length + 4;
   const maxMetaW = Math.max(0, interior - modeW - 3);
   const meta = truncateToWidth(rawMeta, maxMetaW, ELLIPSIS);
   const metaW = visibleWidth(meta);
-  const stripBudget = Math.max(0, cardWidth - stripPrefixW - modeW - metaW - 4);
+  const stripBudget = Math.max(0, interior - modeW - metaW - 2);
 
-  const cells = stageCells(run);
-  const strip = progressStrip(cells, stripBudget, theme);
-  const stripVisibleW = visibleWidth(strip);
-
-  const usedLeftW = modeW + stripVisibleW;
+  const strip = progressStrip(stageCells(run), stripBudget, theme);
+  const usedLeftW = modeW + visibleWidth(strip);
   const gap = Math.max(metaW > 0 ? 1 : 0, interior - usedLeftW - metaW);
 
+  const glyph = statusIconForRun(run);
+  const glyphFg = theme ? hexToAnsi(runAccent(run, theme)) : "";
+  const accent = theme ? hexToAnsi(theme.accent) : "";
+  const text = theme ? hexToAnsi(theme.text) : "";
   const muted = theme ? hexToAnsi(theme.textMuted) : "";
   const dim = theme ? hexToAnsi(theme.dim) : "";
   const reset = theme ? RESET : "";
 
+  const name = truncateToWidth(run.name, Math.max(MIN_TITLE_BUDGET, interior - visibleWidth(sid) - visibleWidth(trailing?.text ?? "") - 8), ELLIPSIS);
+  const line1 = theme
+    ? ` ${glyphFg}${glyph}${RESET}  ${accent}${sid}${RESET}  ${text}${BOLD}${name}${RESET}  ${glyphFg}${trailing?.text ?? ""}${RESET} `
+    : ` ${glyph}  ${sid}  ${name}  ${trailing?.text ?? ""} `;
   const modeSeg = theme ? `${muted}${mode}${reset}` : mode;
   const metaSeg = theme ? `${dim}${meta}${reset}` : meta;
-  const row2 = `${modeSeg}    ${strip}${" ".repeat(gap)}${metaSeg}`;
-
-  return renderTaggedCard({
-    tag: sid,
-    title: run.name,
-    trailing,
-    bodyRows: [row2],
-    accent: stateAccent,
-    width,
-    theme,
-  });
+  const line2 = `   ${modeSeg}    ${strip}${" ".repeat(gap)}${metaSeg} `;
+
+  return [line1, line2];
 }
 
 function runAccent(run: RunSnapshot, theme?: GraphTheme): string {
@@ -207,7 +188,7 @@ function runCardMeta(run: RunSnapshot, now: number): string {
   const isChain = run.stages.length > 1;
   const total = run.stages.length;
   const done = run.stages.filter(
-    (s) => s.status === "completed" || s.status === "failed",
+    (s) => s.status === "completed" || s.status === "failed" || s.status === "skipped",
   ).length;
   const ago = run.endedAt !== undefined
     ? `${fmtDuration(now - run.endedAt)} ago`
@@ -258,7 +239,7 @@ function lastStageDuration(run: RunSnapshot, now: number): string | undefined {
   // Pick a representative stage duration: the most-recent terminal stage,
   // or the running stage if everything's still in flight.
   const candidate =
-    [...run.stages].reverse().find((s) => s.status === "completed" || s.status === "failed") ??
+    [...run.stages].reverse().find((s) => s.status === "completed" || s.status === "failed" || s.status === "skipped") ??
     run.stages.find((s) => s.status === "running");
   if (!candidate) return undefined;
   return stageDurationString(candidate, now);
@@ -359,5 +340,16 @@ function emptyStateLine(theme?: GraphTheme): string {
   return `  ${hexToAnsi(theme.dim)}no in-flight runs${RESET}`;
 }
 
+function statusIconForRun(run: RunSnapshot): string {
+  switch (run.status) {
+    case "completed": return "✓";
+    case "running": return "●";
+    case "failed": return "✗";
+    case "killed": return "⊘";
+    case "pending":
+    default: return "○";
+  }
+}
+
 // Re-export for callers that need to inspect width budgeting.
 export { MIN_TITLE_BUDGET };

package/dist/builtin/workflows/src/tui/store-widget-installer.ts

@@ -13,20 +13,19 @@
  *   2. After `setWidget` we call `ui.requestRender()` to flush the new
  *      content immediately; pi-subagents does the same in its
  *      `rerenderWidget` helper.
- *   3. The widget contents are static per snapshot (no spinner, no live
- *      ticker) so we do not run an animation timer. Store mutations from
- *      stage / tool-execution events are the sole render trigger — this
- *      matches every other workflow status surface (`/workflow status`,
- *      `renderRunDetail`, the orchestrator overlay) which all render
- *      instantly without animation.
+ *   3. The widget contents are static per snapshot (no spinner), but the
+ *      rendered lines include wall-clock labels (`3s`, `complete · 4s ago`)
+ *      and recent-ended visibility. We therefore keep one lightweight
+ *      one-shot refresh timer while the widget is visible, matching other
+ *      live Atomic widgets without reintroducing a high-frequency spinner.
  *   4. The factory builds a pi-tui `Container` of `Text` children styled
  *      via pi's runtime `Theme` (theme.fg, theme.bold). This is what
  *      makes the widget visually distinct from chat content.
  */
 
 import type { Store } from "../shared/store.js";
-import type { StoreSnapshot, RunSnapshot } from "../shared/store-types.js";
-import { buildThemedWidgetLines } from "./widget.js";
+import type { StoreSnapshot } from "../shared/store-types.js";
+import { buildThemedWidgetLines, nextWidgetRefreshDelayMs } from "./widget.js";
 
 export interface PiTheme {
   fg(color: string, text: string): string;
@@ -52,6 +51,20 @@ interface UiSlice {
   requestRender?: () => void;
 }
 
+interface TimerHandle {
+  unref?: () => void;
+}
+
+interface TimerApi {
+  setTimeout(handler: () => void, delayMs: number): TimerHandle;
+  clearTimeout(handle: TimerHandle): void;
+}
+
+const defaultTimerApi: TimerApi = {
+  setTimeout: (handler, delayMs) => setTimeout(handler, delayMs) as TimerHandle,
+  clearTimeout: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
+};
+
 export interface LiveWidgetAPI {
   ui?: UiSlice;
   on?: (event: string, handler: (payload: unknown, context?: unknown) => void) => void;
@@ -84,22 +97,44 @@ function widgetFactory(snap: StoreSnapshot): WidgetFactory {
 export function installStoreWidget(
   pi: LiveWidgetAPI,
   storeInstance: Store,
+  timers: TimerApi = defaultTimerApi,
 ): () => void {
   const ui = pi.ui;
   if (!ui?.setWidget) return () => {};
 
+  let disposed = false;
+  let refreshTimer: TimerHandle | undefined;
+
+  const clearRefreshTimer = (): void => {
+    if (refreshTimer === undefined) return;
+    timers.clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  };
+
+  const scheduleRefresh = (snap: StoreSnapshot): void => {
+    const delayMs = nextWidgetRefreshDelayMs(snap);
+    if (delayMs === undefined) return;
+    refreshTimer = timers.setTimeout(() => {
+      refreshTimer = undefined;
+      rerender();
+    }, delayMs);
+    refreshTimer.unref?.();
+  };
+
   const rerender = (): void => {
+    if (disposed) return;
+    clearRefreshTimer();
     try {
       const snap = storeInstance.snapshot();
-      const hasActiveRuns = (snap.runs as RunSnapshot[]).some(
-        (r) => r.endedAt === undefined,
-      );
-      if (!hasActiveRuns) {
+      const previewLines = buildThemedWidgetLines(snap, undefined);
+      if (previewLines.length === 0) {
         ui.setWidget?.(WIDGET_KEY, undefined);
+        ui.requestRender?.();
         return;
       }
       ui.setWidget?.(WIDGET_KEY, widgetFactory(snap), { placement: "aboveEditor" });
       ui.requestRender?.();
+      scheduleRefresh(snap);
     } catch (err) {
       if (isStale(err)) return;
       throw err;
@@ -110,9 +145,12 @@ export function installStoreWidget(
   rerender();
 
   return () => {
+    disposed = true;
+    clearRefreshTimer();
     unsubscribe();
     try {
       ui.setWidget?.(WIDGET_KEY, undefined);
+      ui.requestRender?.();
     } catch (err) {
       if (!isStale(err)) throw err;
     }

package/dist/builtin/workflows/src/tui/submit-pane.ts

@@ -0,0 +1,164 @@
+import type { WorkflowInputEntry } from "../extension/render-result.js";
+import type { GraphTheme } from "./graph-theme.js";
+import { BOLD, hexBg, hexToAnsi, paint, RESET } from "./color-utils.js";
+import {
+  formatReviewValue,
+  renderWrappedPrefixedLines,
+  truncateToWidth,
+  visibleWidth,
+  wrapPlainText,
+} from "./text-helpers.js";
+
+export interface SubmitPaneRenderOpts {
+  workflowName: string;
+  fields: readonly WorkflowInputEntry[];
+  rawText: Record<string, string>;
+  theme: GraphTheme;
+  width: number;
+}
+
+export interface SubmitControlsRenderOpts {
+  invalidFieldNames: readonly string[];
+  submitFocused: boolean;
+  theme: GraphTheme;
+  width: number;
+}
+
+export function renderWorkflowFormFooterHints(theme: GraphTheme, width: number): string {
+  const hints = [
+    "Enter to select · ↑/↓ to navigate · Tab through questions to Submit · Esc to cancel",
+    "Enter · ↑/↓ · Tab to Submit · Esc",
+    "Enter · Tab · Esc",
+    "Esc",
+  ];
+  const selected = hints.find((hint) => visibleWidth(hint) <= width) ?? hints[hints.length - 1]!;
+  return paint(truncateToWidth(selected, width, "…"), theme.dim);
+}
+
+export function renderAskChoiceRows(
+  index: number,
+  label: string,
+  active: boolean,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const plainPrefix = `${active ? "❯ " : "  "}${index}. `;
+  const firstPrefix = `${active ? paint("❯ ", theme.accent) : "  "}${index}. `;
+  return renderWrappedPrefixedLines({
+    text: label,
+    width,
+    plainPrefix,
+    firstPrefix,
+    styleLine: (line) => active
+      ? paint(line, theme.accent, { bold: true })
+      : paint(line, theme.textMuted),
+  });
+}
+
+export function renderSubmitReview(opts: SubmitPaneRenderOpts): string[] {
+  const { workflowName, fields, rawText, theme, width } = opts;
+  const out: string[] = [paint("Review your inputs", theme.accent, { bold: true }), ""];
+  out.push(truncateToWidth(paint("/workflow ", theme.dim) + paint(workflowName, theme.text), width, "…", true));
+  for (const field of fields) {
+    out.push(truncateToWidth(paint(" ● ", theme.dim) + paint(field.name, theme.textMuted), width, "…", true));
+    out.push(...renderReviewValueRows(field, rawText[field.name] ?? "", theme, width));
+  }
+  return out;
+}
+
+export function renderSubmitControls(opts: SubmitControlsRenderOpts): string[] {
+  const { invalidFieldNames, submitFocused, theme, width } = opts;
+  const invalidCount = invalidFieldNames.length;
+  const submitLabel = "SUBMIT";
+  const lines: string[] = [];
+  if (invalidCount > 0) {
+    lines.push(
+      ...wrapPlainText(
+        `Answer remaining inputs before submitting: ${invalidFieldNames.join(", ")}`,
+        width,
+      ).map((line) => paint(line, theme.warning)),
+      "",
+    );
+  }
+  lines.push(...renderSubmitToolbar(submitLabel, submitFocused, theme, width));
+  return lines;
+}
+
+function renderSubmitToolbar(
+  label: string,
+  focused: boolean,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const chromeBg = hexBg(theme.backgroundPanel);
+  const button = renderCompactSubmitButton(label, focused, theme, chromeBg);
+  const textFg = hexToAnsi(theme.text);
+  const mutedFg = hexToAnsi(theme.textMuted);
+  const dimFg = hexToAnsi(theme.dim);
+  const hint = (key: string, description: string): string =>
+    `${chromeBg}${textFg}${BOLD}${key}${RESET}${chromeBg}${mutedFg} ${description}${RESET}${chromeBg}`;
+  const hints = [
+    hint("enter", "Submit"),
+    hint("tab", "Next"),
+    hint("shift+tab", "Prev"),
+    hint("esc", "Cancel"),
+  ].join(`${chromeBg}${dimFg}  ·  ${RESET}${chromeBg}`);
+  const leftPad = 1;
+  const gap = 2;
+  const rightPad = 1;
+  const hintBudget = Math.max(0, width - leftPad - button.visibleWidth - gap - rightPad);
+  const fittedHints = truncateToWidth(hints, hintBudget, "…", true);
+  const hintWidth = visibleWidth(fittedHints);
+  const filler = Math.max(0, width - leftPad - button.visibleWidth - gap - hintWidth - rightPad);
+  const line = `${chromeBg} ${button.text}${chromeBg}${" ".repeat(gap)}${fittedHints}${chromeBg}${" ".repeat(filler)} ${RESET}`;
+  const clipped = truncateToWidth(line, width, "", true);
+  return [`${clipped}${chromeBg}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}${RESET}`];
+}
+
+function renderCompactSubmitButton(
+  label: string,
+  focused: boolean,
+  theme: GraphTheme,
+  chromeBg: string,
+): { text: string; visibleWidth: number } {
+  const plain = ` ${label} `;
+  if (focused) {
+    const accentBg = hexBg(theme.accent);
+    const fg = hexToAnsi(theme.backgroundPanel);
+    return {
+      text: `${accentBg}${fg}${BOLD}${plain}${RESET}${chromeBg}`,
+      visibleWidth: visibleWidth(plain),
+    };
+  }
+  const labelFg = hexToAnsi(theme.accent);
+  return {
+    text: `${chromeBg}${labelFg}${BOLD}${plain}${RESET}${chromeBg}`,
+    visibleWidth: visibleWidth(plain),
+  };
+}
+
+function renderReviewValueRows(
+  field: WorkflowInputEntry,
+  raw: string,
+  theme: GraphTheme,
+  width: number,
+): string[] {
+  const plainPrefix = "   → ";
+  const firstPrefix = "   " + paint("→ ", theme.dim);
+  return renderWrappedPrefixedLines({
+    text: formatFieldReviewValue(field, raw),
+    width,
+    plainPrefix,
+    firstPrefix,
+    styleLine: (line) => paint(line, theme.text),
+  });
+}
+
+function formatFieldReviewValue(field: WorkflowInputEntry, raw: string): string {
+  if (field.type === "boolean") {
+    const normalized = raw.trim().toLowerCase();
+    if (normalized.length === 0) return formatReviewValue(raw);
+    return normalized === "true" || normalized === "1" ? "on" : "off";
+  }
+  return formatReviewValue(raw);
+}

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

@@ -15,7 +15,7 @@ import type { StageSnapshot } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { statusIcon, statusColor } from "./status-helpers.js";
 import { hexToAnsi, hexBg, RESET, BOLD } from "./color-utils.js";
-import { truncateToWidth, visibleWidth } from "./text-helpers.js";
+import { sliceColumns, truncateToWidth, visibleWidth } from "./text-helpers.js";
 
 export interface SwitcherState {
   query: string;
@@ -45,6 +45,25 @@ function padVisible(s: string, width: number): string {
   return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
 }
 
+/**
+ * Truncate without appending any ANSI reset before the suffix.
+ *
+ * Selected rows are wrapped in a single accent run after row text is composed;
+ * inserting RESET before the ellipsis would prematurely end that highlight.
+ */
+function truncateToWidthWithoutReset(text: string, width: number, suffix = ""): string {
+  const targetWidth = Math.max(0, width);
+  if (visibleWidth(text) <= targetWidth) return text;
+  if (targetWidth === 0) return "";
+
+  const suffixWidth = visibleWidth(suffix);
+  if (suffixWidth >= targetWidth) {
+    return sliceColumns(suffix, 0, targetWidth, true);
+  }
+
+  return `${sliceColumns(text, 0, targetWidth - suffixWidth, true)}${suffix}`;
+}
+
 function statusText(status: StageSnapshot["status"]): string {
   return status === "awaiting_input"
     ? "awaiting"
@@ -94,8 +113,12 @@ export function renderSwitcher(
     `${dim}${hint}${RESET}${panelBg}`;
   lines.push(`${border}│${RESET}${padVisible(header, innerWidth)}${border}│${RESET}`);
 
-  // Quiet rule under header
-  lines.push(`${border}├${"─".repeat(innerWidth)}┤${RESET}`);
+  // Quiet rule under header. Keep it inside the rounded panel instead of
+  // joining into the side borders with square tee glyphs.
+  const rule = innerWidth <= 2
+    ? " ".repeat(innerWidth)
+    : " " + `${dim}${"─".repeat(innerWidth - 2)}${RESET}${panelBg}` + " ";
+  lines.push(`${border}│${RESET}${panelBg}${rule}${border}│${RESET}`);
 
   // Stage list — viewport of 8 around selection
   const maxVisible = 8;
@@ -119,7 +142,7 @@ export function renderSwitcher(
     if (isSelected) {
       const metaWidth = visibleWidth(label);
       const nameBudget = Math.max(4, innerWidth - visibleWidth(`  ${icon} `) - metaWidth - 2);
-      const selectedName = truncateToWidth(stage.name, nameBudget, "…");
+      const selectedName = truncateToWidthWithoutReset(stage.name, nameBudget, "…");
       const prefix = `  ${icon} ${selectedName}`;
       const visibleRow = `${prefix}${" ".repeat(Math.max(1, innerWidth - visibleWidth(`${prefix}${label}`) - 1))}${label} `;
       const padded = padVisible(visibleRow, innerWidth);