@bastani/atomic 0.8.4-0 → 0.8.5-0

package/dist/builtin/workflows/src/tui/run-detail.ts

@@ -24,6 +24,7 @@ import { renderBandHeader } from "./header.js";
 import type { BandBadge } from "./header.js";
 import { fmtDuration, statusIcon, statusColor } from "./status-helpers.js";
 import { hexToAnsi, RESET, BOLD } from "./color-utils.js";
+import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 
 const SHORT_ID_LEN = 6;
 const STAGE_NAME_COL = 14;
@@ -34,6 +35,8 @@ export interface RenderRunDetailOpts {
   theme?: GraphTheme;
   /** Optional clock override for tests. */
   now?: number;
+  /** Optional render width (cells) for truncating long/wide values. */
+  width?: number;
 }
 
 /**
@@ -44,15 +47,16 @@ export function renderRunDetail(
   opts: RenderRunDetailOpts = {},
 ): string {
   const now = opts.now ?? Date.now();
-  if (opts.theme === undefined) return renderPlain(detail, now);
-  return renderThemed(detail, now, opts.theme);
+  const width = Math.max(32, opts.width ?? 80);
+  if (opts.theme === undefined) return renderPlain(detail, now, width);
+  return renderThemed(detail, now, opts.theme, width);
 }
 
 // ---------------------------------------------------------------------------
 // Plain renderer — used by tests and headless consumers
 // ---------------------------------------------------------------------------
 
-function renderPlain(detail: RunDetail, now: number): string {
+function renderPlain(detail: RunDetail, now: number, width: number): string {
   const out: string[] = [];
 
   const sid = shortId(detail.runId);
@@ -60,14 +64,17 @@ function renderPlain(detail: RunDetail, now: number): string {
   const innerLabel = ` RUN ${sid} `;
   const inner = "─".repeat(innerLabel.length);
   out.push(` ╭${inner}╮`);
-  out.push(` │${innerLabel}│  ${detail.name}    ${stateBadge}`);
+  const headerTailW = visibleWidth(` │${innerLabel}│  `) + visibleWidth(`    ${stateBadge}`);
+  const headerName = truncateToWidth(detail.name, Math.max(1, width - headerTailW), "…");
+  out.push(` │${innerLabel}│  ${headerName}    ${stateBadge}`);
   out.push(` ╰${inner}╯`);
   out.push("");
 
   // Summary key/value lines
   for (const [k, v] of summaryRows(detail, now)) {
     if (v === undefined) continue;
-    out.push(`  ${pad(k, KEY_COL)}${v}`);
+    const value = truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…");
+    out.push(`  ${pad(k, KEY_COL)}${value}`);
   }
   out.push("");
 
@@ -78,9 +85,10 @@ function renderPlain(detail: RunDetail, now: number): string {
     out.push("  (no stages recorded yet)");
   } else {
     for (const stage of detail.stages) {
-      out.push(`  ${stageLinePlain(stage, now)}`);
+      out.push(`  ${stageLinePlain(stage, now, width - 2)}`);
       if (stage.error) {
-        out.push(`  ${" ".repeat(STAGE_NAME_COL + 2)}error  ${stage.error.split("\n")[0]?.slice(0, 60) ?? ""}`);
+        const err = truncateToWidth(stage.error.split("\n")[0] ?? "", Math.max(1, width - STAGE_NAME_COL - 11), "…");
+        out.push(`  ${" ".repeat(STAGE_NAME_COL + 2)}error  ${err}`);
       }
     }
   }
@@ -92,16 +100,16 @@ function renderPlain(detail: RunDetail, now: number): string {
     out.push("▎ ARTIFACTS");
     out.push("");
     for (const [k, v] of artifactRows) {
-      out.push(`  ${pad(k, KEY_COL)}${v}`);
+      out.push(`  ${pad(k, KEY_COL)}${truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…")}`);
     }
     out.push("");
   }
 
   // Action hints
   if (detail.endedAt === undefined) {
-    out.push(`  ▸ workflow interrupt   id=${sid}    cancel`);
+    out.push(truncateToWidth(`  ▸ workflow interrupt   id=${sid}    cancel`, width, "…"));
   } else {
-    out.push(`  ▸ workflow resume id=${sid}    reopen graph`);
+    out.push(truncateToWidth(`  ▸ workflow resume id=${sid}    reopen graph`, width, "…"));
   }
 
   return out.join("\n");
@@ -111,7 +119,7 @@ function renderPlain(detail: RunDetail, now: number): string {
 // Themed renderer — ANSI Catppuccin chrome
 // ---------------------------------------------------------------------------
 
-function renderThemed(detail: RunDetail, now: number, theme: GraphTheme): string {
+function renderThemed(detail: RunDetail, now: number, theme: GraphTheme, width: number): string {
   const out: string[] = [];
   const mauve = hexToAnsi(theme.mauve);
   const muted = hexToAnsi(theme.textMuted);
@@ -128,7 +136,7 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme): string
     label: `RUN ${sid}`,
     subtitle: detail.name,
     badges,
-    width: 64,
+    width: Math.min(64, width),
     theme,
   }));
   out.push("");
@@ -136,7 +144,8 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme): string
   // Summary key/value
   for (const [k, v] of summaryRows(detail, now)) {
     if (v === undefined) continue;
-    out.push(`  ${muted}${pad(k, KEY_COL)}${RESET}${text}${v}${RESET}`);
+    const value = truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…");
+    out.push(`  ${muted}${pad(k, KEY_COL)}${RESET}${text}${value}${RESET}`);
   }
   out.push("");
 
@@ -147,11 +156,12 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme): string
     out.push(`  ${dim}(no stages recorded yet)${RESET}`);
   } else {
     for (const stage of detail.stages) {
-      out.push("  " + stageLineThemed(stage, now, theme));
+      out.push("  " + stageLineThemed(stage, now, theme, width - 2));
       if (stage.error) {
         const errFg = hexToAnsi(theme.error);
+        const err = truncateToWidth(stage.error.split("\n")[0] ?? "", Math.max(1, width - STAGE_NAME_COL - 13), "…");
         out.push(
-          `  ${" ".repeat(STAGE_NAME_COL + 2)}${muted}error${RESET}    ${errFg}${stage.error.split("\n")[0]?.slice(0, 60) ?? ""}${RESET}`,
+          `  ${" ".repeat(STAGE_NAME_COL + 2)}${muted}error${RESET}    ${errFg}${err}${RESET}`,
         );
       }
     }
@@ -164,7 +174,7 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme): string
     out.push(`${mauve}▎${RESET} ${muted}${BOLD}ARTIFACTS${RESET}`);
     out.push("");
     for (const [k, v] of artifactRows) {
-      out.push(`  ${muted}${pad(k, KEY_COL)}${RESET}${dim}${v}${RESET}`);
+      out.push(`  ${muted}${pad(k, KEY_COL)}${RESET}${dim}${truncateToWidth(v, Math.max(1, width - 2 - KEY_COL), "…")}${RESET}`);
     }
     out.push("");
   }
@@ -172,11 +182,11 @@ function renderThemed(detail: RunDetail, now: number, theme: GraphTheme): string
   // Action hints
   if (detail.endedAt === undefined) {
     out.push(
-      `  ${dim}▸${RESET} ${accent}workflow interrupt   id=${sid}${RESET}${dim}    cancel${RESET}`,
+      truncateToWidth(`  ${dim}▸${RESET} ${accent}workflow interrupt   id=${sid}${RESET}${dim}    cancel${RESET}`, width, "…"),
     );
   } else {
     out.push(
-      `  ${dim}▸${RESET} ${accent}workflow resume id=${sid}${RESET}${dim}    reopen graph${RESET}`,
+      truncateToWidth(`  ${dim}▸${RESET} ${accent}workflow resume id=${sid}${RESET}${dim}    reopen graph${RESET}`, width, "…"),
     );
   }
 
@@ -206,7 +216,7 @@ function summaryRows(detail: RunDetail, now: number): Array<[string, string | un
     rows.push(["elapsed", fmtDuration(duration)]);
   }
   if (detail.error) {
-    rows.push(["error", detail.error.split("\n")[0]?.slice(0, 60) ?? ""]);
+    rows.push(["error", detail.error.split("\n")[0] ?? ""]);
   }
   return rows;
 }
@@ -214,7 +224,7 @@ function summaryRows(detail: RunDetail, now: number): Array<[string, string | un
 function artifactRowsFor(detail: RunDetail): Array<[string, string]> {
   const rows: Array<[string, string]> = [];
   if (detail.result !== undefined && Object.keys(detail.result).length > 0) {
-    rows.push(["result", JSON.stringify(detail.result).slice(0, 80)]);
+    rows.push(["result", JSON.stringify(detail.result)]);
   }
   const inputKeys = Object.keys(detail.inputs);
   if (inputKeys.length > 0) {
@@ -223,20 +233,22 @@ function artifactRowsFor(detail: RunDetail): Array<[string, string]> {
   return rows;
 }
 
-function stageLinePlain(stage: StageSnapshot, now: number): string {
+function stageLinePlain(stage: StageSnapshot, now: number, width: number): string {
   const icon = statusIcon(stage.status);
   const dur = stageDurationString(stage, now);
   const activity = stageActivityString(stage);
+  const name = truncateToWidth(`${icon} ${stage.name}`, STAGE_NAME_COL + 2, "…");
+  const activityText = activity ? truncateToWidth(activity, 16, "…") : undefined;
   const parts = [
-    pad(`${icon} ${stage.name}`, STAGE_NAME_COL + 2),
+    pad(name, STAGE_NAME_COL + 2),
     pad(stage.status, 10),
   ];
-  if (activity) parts.push(pad(activity, 16));
+  if (activityText) parts.push(pad(activityText, 16));
   if (dur) parts.push(dur);
-  return parts.join("");
+  return truncateToWidth(parts.join(""), width, "…");
 }
 
-function stageLineThemed(stage: StageSnapshot, now: number, theme: GraphTheme): string {
+function stageLineThemed(stage: StageSnapshot, now: number, theme: GraphTheme, width: number): string {
   const icon = statusIcon(stage.status);
   const iconFg = hexToAnsi(statusColor(stage.status, theme));
   const text = hexToAnsi(theme.text);
@@ -247,14 +259,20 @@ function stageLineThemed(stage: StageSnapshot, now: number, theme: GraphTheme):
   const activity = stageActivityString(stage);
   const dur = stageDurationString(stage, now);
 
-  const namePad = pad(stage.name, STAGE_NAME_COL);
+  const nameText = truncateToWidth(stage.name, STAGE_NAME_COL, "…");
+  const namePad = pad(nameText, STAGE_NAME_COL);
   const statePad = pad(stage.status, 10);
-  const activitySeg = activity
-    ? `${muted}${pad(activity, 16)}${RESET}`
+  const activityText = activity ? truncateToWidth(activity, 16, "…") : undefined;
+  const activitySeg = activityText
+    ? `${muted}${pad(activityText, 16)}${RESET}`
     : " ".repeat(16);
   const durSeg = dur ? `${dim}${dur}${RESET}` : "";
 
-  return `${iconFg}${icon}${RESET} ${text}${namePad}${RESET}  ${stateFg}${statePad}${RESET}${activitySeg}${durSeg}`;
+  return truncateToWidth(
+    `${iconFg}${icon}${RESET} ${text}${namePad}${RESET}  ${stateFg}${statePad}${RESET}${activitySeg}${durSeg}`,
+    width,
+    "…",
+  );
 }
 
 function stageDurationString(stage: StageSnapshot, now: number): string | undefined {
@@ -322,8 +340,9 @@ function shortId(id: string): string {
 }
 
 function pad(s: string, n: number): string {
-  if (s.length >= n) return s;
-  return s + " ".repeat(n - s.length);
+  const width = visibleWidth(s);
+  if (width >= n) return s;
+  return s + " ".repeat(n - width);
 }
 
 function formatTime(ms: number): string {

package/dist/builtin/workflows/src/tui/session-confirm.ts

@@ -18,11 +18,12 @@
  *  - DESIGN.md §5 Components — destructive button
  */
 
+import { keyText } from "@bastani/atomic";
 import type { RunSnapshot } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { fmtDuration } from "./status-helpers.js";
 import { hexToAnsi, hexBg, RESET, BOLD } from "./color-utils.js";
-import { visibleWidth } from "./text-helpers.js";
+import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 
 export interface KillConfirmState {
   /** 0 = Cancel (focused by default), 1 = Kill. */
@@ -67,17 +68,18 @@ function renderFooter(width: number, theme: GraphTheme): string {
   const text = hexToAnsi(theme.text);
   const muted = hexToAnsi(theme.textMuted);
   const sep = `${dim} \u00b7 ${RESET}`;
-  const hints: Array<[string, string]> = [
-    ["y", "kill"],
-    ["n", "cancel"],
-    ["\u21b5", "confirm"],
-    ["esc", "cancel"],
-  ];
-  const parts = hints.map(([k, l]) => `${text}${k}${RESET} ${muted}${l}${RESET}`);
-  const line = parts.join(sep);
+  const hint = (key: string, label: string) => `${text}${key}${RESET} ${muted}${label}${RESET}`;
+  const line = [
+    hint("y", "Kill"),
+    hint("n", "Cancel"),
+    hint(keyText("tui.select.confirm"), "Confirm"),
+    hint(keyText("tui.select.cancel"), "Cancel"),
+  ].join(sep);
   const leftRule = "\u2500\u2500 ";
-  const padLen = Math.max(1, inner - leftRule.length - visibleWidth(line) - 1);
-  const innerContent = `${border}${leftRule}${RESET}${line}${border}${" ".repeat(padLen)}${RESET}`;
+  const lineBudget = Math.max(1, inner - visibleWidth(leftRule) - 1);
+  const clippedLine = truncateToWidth(line, lineBudget, "…");
+  const padLen = Math.max(1, inner - visibleWidth(leftRule) - visibleWidth(clippedLine) - 1);
+  const innerContent = `${border}${leftRule}${RESET}${clippedLine}${border}${" ".repeat(padLen)}${RESET}`;
   return `${border}\u2570${RESET}${padTo(innerContent, inner)}${border}\u256f${RESET}`;
 }
 
@@ -131,9 +133,14 @@ export function renderKillConfirm(opts: KillConfirmRenderOpts): string[] {
   lines.push(renderHeader(width, theme));
   lines.push(renderBlankRow(inner, theme));
 
-  // Identity row: ⚠  <name>  ·  <idShort>
+  // Identity row: ⚠  <name>  ·  <idShort>. Keep the destructive dialog
+  // width-safe even for wide workflow names.
+  const identityPrefixW = visibleWidth("   ⚠  ");
+  const identitySuffixW = visibleWidth(`  ·  ${idShort}`);
+  const nameBudget = Math.max(1, inner - identityPrefixW - identitySuffixW);
+  const name = truncateToWidth(run.name, nameBudget, "…");
   const identity =
-    `   ${warning}\u26a0${RESET}${panelBg}  ${text}${BOLD}${run.name}${RESET}${panelBg}  ${dim}\u00b7${RESET}${panelBg}  ${muted}${idShort}${RESET}`;
+    `   ${warning}\u26a0${RESET}${panelBg}  ${text}${BOLD}${name}${RESET}${panelBg}  ${dim}\u00b7${RESET}${panelBg}  ${muted}${idShort}${RESET}`;
   lines.push(renderTextRow(inner, theme, identity));
 
   // Status sub-line.
@@ -152,7 +159,7 @@ export function renderKillConfirm(opts: KillConfirmRenderOpts): string[] {
   lines.push(renderTextRow(
     inner,
     theme,
-    `      ${muted}The runId stays in history.${RESET}`,
+    `      ${muted}Removes the run from live history/status.${RESET}`,
   ));
   lines.push(renderBlankRow(inner, theme));
 

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

@@ -20,9 +20,10 @@
 
 import type { RunSnapshot } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
+import { keyText } from "@bastani/atomic";
 import { fmtDuration, statusIcon, statusColor } from "./status-helpers.js";
 import { hexToAnsi, hexBg, RESET, BOLD } from "./color-utils.js";
-import { visibleWidth } from "./text-helpers.js";
+import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 
 // ---------------------------------------------------------------------------
 // State + filtering
@@ -141,32 +142,32 @@ function renderHintsRow(width: number, theme: GraphTheme, state: SessionPickerSt
   const text = hexToAnsi(theme.text);
   const muted = hexToAnsi(theme.textMuted);
   const sep = `${dim} · ${RESET}`;
+  const hint = (key: string, label: string) => `${text}${key}${RESET} ${muted}${label}${RESET}`;
 
-  const hints: Array<[string, string]> = state.filterFocused
+  const parts: string[] = state.filterFocused
     ? [
-        ["↵", "submit"],
-        ["esc", "exit filter"],
+        hint(keyText("tui.select.confirm"), "Submit"),
+        hint(keyText("tui.select.cancel"), "Exit Filter"),
       ]
     : [
-        ["↑↓", "navigate"],
-        ["↵", "connect"],
-        ["x", "kill"],
-        ["a", state.includeAll ? "active only" : "all"],
-        ["/", "filter"],
-        ["esc", "close"],
+        hint(`${keyText("tui.select.up")}/${keyText("tui.select.down")}`, "Navigate"),
+        hint(keyText("tui.select.confirm"), "Connect"),
+        hint("x", "Kill"),
+        hint("a", state.includeAll ? "Active Only" : "All"),
+        hint("/", "Filter"),
+        hint(keyText("tui.select.cancel"), "Close"),
       ];
 
-  const parts = hints.map(([k, l]) => `${text}${k}${RESET} ${muted}${l}${RESET}`);
   // Two-space indent matches `renderEmptyState` and the section-row
   // chrome, keeping the hint glyphs aligned with the panel interior
   // even though they live outside the box border.
   const line = "  " + parts.join(sep);
-  // The renderer clamps each line to `width` in the host composite
-  // pass; explicit clip here keeps the test-time render() output
-  // width-safe as well.
-  const lineWidth = visibleWidth(line);
-  if (lineWidth >= width) return line;
-  return line + " ".repeat(width - lineWidth);
+  // Keep test-time render() output width-safe even before the overlay host
+  // gets a chance to composite/truncate it.
+  const clipped = truncateToWidth(line, width, "…");
+  const lineWidth = visibleWidth(clipped);
+  if (lineWidth >= width) return clipped;
+  return clipped + " ".repeat(width - lineWidth);
 }
 
 function renderBlankRow(inner: number, theme: GraphTheme): string {
@@ -193,9 +194,13 @@ function renderFilterRow(inner: number, theme: GraphTheme, state: SessionPickerS
   const accent = hexToAnsi(theme.accent);
   const cursor = state.filterFocused ? `${accent}▌${RESET}${panelBg}` : "";
   const label = state.filterFocused ? `${accent}filter` : `${muted}filter`;
+  const prefixPlain = " ▎ filter  ";
+  const valueBudget = Math.max(1, inner - visibleWidth(prefixPlain) - (state.filterFocused ? 1 : 0));
+  const rawValue = state.query || "(type to filter by name or id)";
+  const shownValue = truncateToWidth(rawValue, valueBudget, "…");
   const value = state.query
-    ? `${text}${state.query}${RESET}${panelBg}`
-    : `${muted}(type to filter by name or id)${RESET}${panelBg}`;
+    ? `${text}${shownValue}${RESET}${panelBg}`
+    : `${muted}${shownValue}${RESET}${panelBg}`;
   const content = ` ${mauve}▎${RESET}${panelBg} ${label}${RESET}${panelBg}  ${value}${cursor}`;
   return `${border}│${RESET}${panelBg}${padTo(content, inner)}${RESET}${border}│${RESET}`;
 }
@@ -232,15 +237,21 @@ function renderRunRow(
   const elapsed = fmtElapsed(run, now);
   const progress = stageProgress(run);
 
-  // Layout columns: glyph(1) idShort(8) name(flex) elapsed(R) progress(R)
+  // Layout columns: glyph(1) idShort(8) name(flex) elapsed(R) progress(R).
+  // Name budgeting is done by visible cell width so wide workflow names
+  // cannot push the elapsed/progress columns through the right border.
   const elapsedCol = elapsed.padStart(8, " ");
   const progressCol = progress.padStart(10, " ");
+  const rightPlain = `${elapsedCol}   ${progressCol} `;
+  const namePrefixW = visibleWidth(` ${icon} ${idShort}  `);
+  const nameBudget = Math.max(1, inner - namePrefixW - visibleWidth(rightPlain) - 1);
+  const name = truncateToWidth(run.name, nameBudget, "…");
 
   if (isSelected) {
     const pillBg = hexBg(theme.accent);
     const pillFg = hexToAnsi(theme.backgroundElement);
-    const left = ` ${icon} ${idShort}  ${run.name}`;
-    const right = `${elapsedCol}   ${progressCol} `;
+    const left = ` ${icon} ${idShort}  ${name}`;
+    const right = rightPlain;
     const gap = Math.max(1, inner - visibleWidth(left) - visibleWidth(right));
     const content = `${left}${" ".repeat(gap)}${right}`;
     return `${border}│${RESET}${pillBg}${pillFg}${BOLD}${padTo(content, inner)}${RESET}${border}│${RESET}`;
@@ -253,11 +264,9 @@ function renderRunRow(
   const muted = hexToAnsi(theme.textMuted);
 
   const left =
-    ` ${iconColor}${icon}${RESET}${panelBg} ${dim}${idShort}${RESET}${panelBg}  ${text}${run.name}${RESET}${panelBg}`;
+    ` ${iconColor}${icon}${RESET}${panelBg} ${dim}${idShort}${RESET}${panelBg}  ${text}${name}${RESET}${panelBg}`;
   const right = `${muted}${elapsedCol}${RESET}${panelBg}   ${dim}${progressCol}${RESET}${panelBg} `;
-  const visLeft = 1 + 1 + 1 + 8 + 2 + run.name.length;
-  const visRight = visibleWidth(elapsedCol) + 3 + visibleWidth(progressCol) + 1;
-  const gap = Math.max(1, inner - visLeft - visRight);
+  const gap = Math.max(1, inner - visibleWidth(left) - visibleWidth(right));
   const content = `${left}${" ".repeat(gap)}${right}`;
   return `${border}│${RESET}${panelBg}${padTo(content, inner)}${RESET}${border}│${RESET}`;
 }