@wichayutdew/pi-workflows 1.0.1 → 2.0.0

package/src/step-log.ts

@@ -0,0 +1,178 @@
+import { MAX_STEP_TRACE_LOG_EVENT_CHARS } from './engine/state-types.ts';
+
+const REDACTED = '[redacted]';
+const SECRET_KEY =
+  /(?:^|[-_])(authorization|cookie|set-cookie|api[-_]?key|access[-_]?token|refresh[-_]?token|token|secret|password|passwd|credential|private[-_]?key|client[-_]?secret)(?:$|[-_])/i;
+const LABELED_VALUE =
+  /(^|[^A-Za-z0-9_])([A-Za-z0-9_-]*(?:authorization|proxy[-_]?authorization|cookie|set[-_]?cookie|api[-_]?key|access[-_]?token|refresh[-_]?token|client[-_]?secret|private[-_]?key|password|passwd|credential|token|secret)[A-Za-z0-9_-]*)\s*[:=]\s*(?:"[^"]*"|'[^']*'|[^\s,;]+)/gim;
+
+type UnknownRecord = Readonly<Record<string, unknown>>;
+
+const isRecord = (value: unknown): value is UnknownRecord =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const sanitizeControls = (value: string): string => {
+  let safe = '';
+  for (const character of value) {
+    const code = character.codePointAt(0) ?? 0;
+    const isAllowedWhitespace = code === 9 || code === 10;
+    if (
+      (!isAllowedWhitespace && code < 32) ||
+      code === 127 ||
+      (code >= 128 && code <= 159)
+    ) {
+      continue;
+    }
+    safe += character;
+  }
+  return safe.replaceAll('\r\n', '\n').replaceAll('\r', '\n');
+};
+
+/** Removes terminal control bytes and bounds one persisted/displayed log event. */
+export function sanitizeStepLogText(value: string): string {
+  const normalized = sanitizeControls(value);
+  return normalized.length <= MAX_STEP_TRACE_LOG_EVENT_CHARS
+    ? normalized
+    : `${normalized.slice(0, MAX_STEP_TRACE_LOG_EVENT_CHARS - 1)}…`;
+}
+
+const redactStructured = (value: unknown, depth = 0): unknown => {
+  if (depth > 20) return '[nested value omitted]';
+  if (Array.isArray(value)) {
+    return value.map((item) => redactStructured(item, depth + 1));
+  }
+  if (!isRecord(value)) {
+    return typeof value === 'string' ? sanitizeStepLogText(value) : value;
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([key, item]) => [
+      key,
+      SECRET_KEY.test(`-${key}-`)
+        ? REDACTED
+        : redactStructured(item, depth + 1),
+    ]),
+  );
+};
+
+const redactCommonCredentials = (value: string): string =>
+  value
+    .replaceAll(/\b(Bearer|Basic)\s+[A-Za-z0-9._~+/=-]+/gi, `$1 ${REDACTED}`)
+    .replace(
+      LABELED_VALUE,
+      (original: string, prefix: string, key: string): string =>
+        SECRET_KEY.test(`-${key}-`) ? `${prefix}${key}=${REDACTED}` : original,
+    );
+
+/** Removes terminal controls and common credential forms from one log event. */
+export function redactStepLogText(value: string): string {
+  return redactCommonCredentials(sanitizeStepLogText(value));
+}
+
+/** Redacts a checkpoint-bounded detail field without per-event truncation. */
+export function redactStepDetailText(value: string): string {
+  return redactCommonCredentials(sanitizeControls(value));
+}
+
+/** Formats and redacts an unknown structured value for a step log. */
+export function redactStepLogValue(value: unknown): string {
+  if (typeof value === 'string') return redactStepLogText(value);
+  try {
+    return redactStepLogText(
+      JSON.stringify(redactStructured(value), undefined, 2),
+    );
+  } catch {
+    return '[unserializable value]';
+  }
+}
+
+const contentText = (content: unknown): string => {
+  if (typeof content === 'string') return redactStepLogText(content);
+  if (!Array.isArray(content)) return '';
+  return content
+    .flatMap((item) => {
+      if (!isRecord(item)) return [];
+      if (item.type === 'text' && typeof item.text === 'string') {
+        return [item.text];
+      }
+      if (item.type === 'image') return ['[image]'];
+      if (item.type === 'audio') return ['[audio]'];
+      return [];
+    })
+    .map(redactStepLogText)
+    .filter(Boolean)
+    .join('\n');
+};
+
+/**
+ * Returns exact text only for a text-only user message.
+ *
+ * Pi converts extension-supplied workflow tasks to one or more text blocks.
+ * Rejecting non-text blocks keeps trace arming tied to that exact task shape.
+ */
+export function textOnlyUserMessage(message: unknown): string | undefined {
+  if (!isRecord(message) || message.role !== 'user') return undefined;
+  if (typeof message.content === 'string') return message.content;
+  if (
+    !Array.isArray(message.content) ||
+    message.content.some(
+      (item) =>
+        !isRecord(item) ||
+        item.type !== 'text' ||
+        typeof item.text !== 'string',
+    )
+  ) {
+    return undefined;
+  }
+  return message.content
+    .map((item) => (item as { readonly text: string }).text)
+    .join('\n');
+}
+
+/** Projects one finalized assistant or tool-result message to safe log lines. */
+export function stepLogLinesFromMessage(message: unknown): Array<string> {
+  if (!isRecord(message)) return [];
+  if (message.role === 'assistant') {
+    if (!Array.isArray(message.content)) return [];
+    const contentLines = message.content.flatMap((item) => {
+      if (!isRecord(item)) return [];
+      if (item.type === 'text' && typeof item.text === 'string') {
+        const text = redactStepLogText(item.text);
+        return text ? [`assistant\n${text}`] : [];
+      }
+      if (item.type === 'toolCall' && typeof item.name === 'string') {
+        const argumentsText = redactStepLogValue(item.arguments);
+        return [
+          `tool call · ${sanitizeStepLogText(item.name)}${
+            argumentsText ? `\n${argumentsText}` : ''
+          }`,
+        ];
+      }
+      // Thinking is intentionally excluded from persisted and displayed logs.
+      return [];
+    });
+    const error =
+      typeof message.errorMessage === 'string'
+        ? redactStepLogText(message.errorMessage)
+        : '';
+    return [...contentLines, ...(error ? [`assistant error\n${error}`] : [])];
+  }
+  if (message.role !== 'toolResult') return [];
+  const tool =
+    typeof message.toolName === 'string'
+      ? sanitizeStepLogText(message.toolName)
+      : 'unknown tool';
+  const result = contentText(message.content);
+  const state = message.isError === true ? 'error' : 'result';
+  return [`tool ${state} · ${tool}${result ? `\n${result}` : ''}`];
+}
+
+/** Projects a finalized Pi turn in stable assistant/source-result order. */
+export function stepLogLinesFromTurn(
+  message: unknown,
+  toolResults: ReadonlyArray<unknown>,
+): Array<string> {
+  return [
+    ...stepLogLinesFromMessage(message),
+    ...toolResults.flatMap(stepLogLinesFromMessage),
+  ];
+}

package/src/workflow-doctor.ts

@@ -0,0 +1,254 @@
+import type { WorkflowDefinition, WorkflowStep } from './config/types.ts';
+
+export type WorkflowDoctorLevel = 'error' | 'warning';
+
+export type WorkflowDoctorIssue = {
+  readonly level: WorkflowDoctorLevel;
+  readonly code:
+    | 'no-completion-path'
+    | 'reachable-step-cannot-reach-done'
+    | 'unreachable-steps'
+    | 'cycle';
+  readonly steps: ReadonlyArray<string>;
+  readonly message: string;
+  readonly reachable?: boolean;
+  readonly canReachDone?: boolean;
+};
+
+export type WorkflowDoctorReport = {
+  readonly workflowId: string;
+  readonly maxStepVisits: number;
+  readonly reachableSteps: ReadonlyArray<string>;
+  readonly issues: ReadonlyArray<WorkflowDoctorIssue>;
+};
+
+const lexical = (left: string, right: string): number =>
+  left < right ? -1 : left > right ? 1 : 0;
+
+const internalTargets = (step: WorkflowStep): ReadonlyArray<string> =>
+  [
+    ...new Set(
+      Object.values(step.transitions).filter(
+        (target) => target !== '$done' && target !== '$pause',
+      ),
+    ),
+  ].sort(lexical);
+
+const adjacencyFor = (
+  definition: WorkflowDefinition,
+): Readonly<Record<string, ReadonlyArray<string>>> =>
+  Object.fromEntries(
+    Object.entries(definition.steps)
+      .sort(([left], [right]) => lexical(left, right))
+      .map(([stepId, step]) => [stepId, internalTargets(step)]),
+  );
+
+const reachableSteps = (
+  definition: WorkflowDefinition,
+  adjacency: Readonly<Record<string, ReadonlyArray<string>>>,
+): ReadonlySet<string> => {
+  const reachable = new Set<string>();
+  const pending = [definition.start];
+  while (pending.length > 0) {
+    const stepId = pending.pop();
+    if (!stepId || reachable.has(stepId)) continue;
+    if (!definition.steps[stepId]) continue;
+    reachable.add(stepId);
+    pending.push(...(adjacency[stepId] ?? []));
+  }
+  return reachable;
+};
+
+const stepsThatCanComplete = (
+  definition: WorkflowDefinition,
+  adjacency: Readonly<Record<string, ReadonlyArray<string>>>,
+): ReadonlySet<string> => {
+  const canComplete = new Set<string>(
+    Object.entries(definition.steps)
+      .filter(([, step]) => Object.values(step.transitions).includes('$done'))
+      .map(([stepId]) => stepId),
+  );
+
+  const reverse = new Map<string, Array<string>>();
+  for (const [source, targets] of Object.entries(adjacency)) {
+    for (const target of targets) {
+      reverse.set(target, [...(reverse.get(target) ?? []), source]);
+    }
+  }
+  const pending = [...canComplete].sort(lexical);
+  while (pending.length > 0) {
+    const stepId = pending.pop();
+    if (!stepId) continue;
+    for (const predecessor of (reverse.get(stepId) ?? []).sort(lexical)) {
+      if (canComplete.has(predecessor)) continue;
+      canComplete.add(predecessor);
+      pending.push(predecessor);
+    }
+  }
+  return canComplete;
+};
+
+const stronglyConnectedComponents = (
+  definition: WorkflowDefinition,
+  adjacency: Readonly<Record<string, ReadonlyArray<string>>>,
+): ReadonlyArray<ReadonlyArray<string>> => {
+  let nextIndex = 0;
+  const indexes = new Map<string, number>();
+  const lowLinks = new Map<string, number>();
+  const stack: Array<string> = [];
+  const onStack = new Set<string>();
+  const components: Array<Array<string>> = [];
+
+  const visit = (stepId: string): void => {
+    indexes.set(stepId, nextIndex);
+    lowLinks.set(stepId, nextIndex);
+    nextIndex += 1;
+    stack.push(stepId);
+    onStack.add(stepId);
+
+    for (const target of adjacency[stepId] ?? []) {
+      if (!indexes.has(target)) {
+        visit(target);
+        lowLinks.set(
+          stepId,
+          Math.min(lowLinks.get(stepId) ?? 0, lowLinks.get(target) ?? 0),
+        );
+      } else if (onStack.has(target)) {
+        lowLinks.set(
+          stepId,
+          Math.min(lowLinks.get(stepId) ?? 0, indexes.get(target) ?? 0),
+        );
+      }
+    }
+
+    if (lowLinks.get(stepId) !== indexes.get(stepId)) return;
+    const component: Array<string> = [];
+    let member: string | undefined;
+    do {
+      member = stack.pop();
+      if (!member) break;
+      onStack.delete(member);
+      component.push(member);
+    } while (member !== stepId);
+    components.push(component.sort(lexical));
+  };
+
+  for (const stepId of Object.keys(definition.steps).sort(lexical)) {
+    if (!indexes.has(stepId)) visit(stepId);
+  }
+  return components.sort((left, right) =>
+    lexical(left.join('\0'), right.join('\0')),
+  );
+};
+
+const isCycle = (
+  adjacency: Readonly<Record<string, ReadonlyArray<string>>>,
+  component: ReadonlyArray<string>,
+): boolean => {
+  if (component.length > 1) return true;
+  const [stepId] = component;
+  return Boolean(stepId && adjacency[stepId]?.includes(stepId));
+};
+
+/**
+ * Analyzes only the declarative transition graph. Outcome names and prompt
+ * content are intentionally opaque to the workflow engine.
+ */
+export function analyzeWorkflow(
+  definition: WorkflowDefinition,
+): WorkflowDoctorReport {
+  const adjacency = adjacencyFor(definition);
+  const reachable = reachableSteps(definition, adjacency);
+  const canComplete = stepsThatCanComplete(definition, adjacency);
+  const issues: Array<WorkflowDoctorIssue> = [];
+  const stranded = [...reachable]
+    .filter((stepId) => !canComplete.has(stepId))
+    .sort(lexical);
+  if (!canComplete.has(definition.start)) {
+    issues.push({
+      level: 'error',
+      code: 'no-completion-path',
+      steps: [definition.start],
+      message: `start step ${definition.start} cannot reach $done`,
+    });
+  }
+  if (stranded.length > 0) {
+    issues.push({
+      level: 'error',
+      code: 'reachable-step-cannot-reach-done',
+      steps: stranded,
+      message: `reachable step${stranded.length === 1 ? '' : 's'} ${stranded.join(', ')} cannot reach $done`,
+    });
+  }
+
+  const unreachable = Object.keys(definition.steps)
+    .filter((stepId) => !reachable.has(stepId))
+    .sort(lexical);
+  if (unreachable.length > 0) {
+    issues.push({
+      level: 'warning',
+      code: 'unreachable-steps',
+      steps: unreachable,
+      message: `unreachable step${unreachable.length === 1 ? '' : 's'}: ${unreachable.join(', ')}`,
+    });
+  }
+
+  for (const component of stronglyConnectedComponents(definition, adjacency)) {
+    if (!isCycle(adjacency, component)) continue;
+    const componentIsReachable = component.some((stepId) =>
+      reachable.has(stepId),
+    );
+    const componentCanReachDone = component.some((stepId) =>
+      canComplete.has(stepId),
+    );
+    issues.push({
+      level: 'warning',
+      code: 'cycle',
+      steps: component,
+      reachable: componentIsReachable,
+      canReachDone: componentCanReachDone,
+      message: `${componentIsReachable ? 'reachable' : 'unreachable'} cyclic component: ${component.join(', ')}; ${componentCanReachDone ? 'an exit can reach $done' : 'no member can reach $done'}; maxStepVisits=${definition.maxStepVisits} bounds uninterrupted graph cycling`,
+    });
+  }
+
+  return {
+    workflowId: definition.id,
+    maxStepVisits: definition.maxStepVisits,
+    reachableSteps: [...reachable].sort(lexical),
+    issues,
+  };
+}
+
+const escapeMarkdown = (value: string): string =>
+  value.replaceAll('\\', '\\\\').replaceAll('|', '\\|');
+
+/** Formats one or more graph reports for `/workflow-doctor`. */
+export function formatWorkflowDoctor(
+  reports: ReadonlyArray<WorkflowDoctorReport>,
+): string {
+  const lines = ['# Workflow doctor', ''];
+  for (const report of reports) {
+    const errors = report.issues.filter((issue) => issue.level === 'error');
+    const warnings = report.issues.filter((issue) => issue.level === 'warning');
+    lines.push(
+      `## ${report.workflowId}`,
+      '',
+      `Result: ${errors.length > 0 ? 'ERROR' : warnings.length > 0 ? 'WARNING' : 'PASS'}`,
+      '',
+      `Runtime loop guard: each step executes at most ${report.maxStepVisits} time${report.maxStepVisits === 1 ? '' : 's'} before the next attempted entry pauses an uninterrupted run. This bounds graph cycling; it does not guarantee $done or bound time spent inside a step or gate.`,
+      '',
+    );
+    if (report.issues.length === 0) {
+      lines.push('- No liveness issues found.', '');
+      continue;
+    }
+    lines.push(
+      ...report.issues.map(
+        (issue) =>
+          `- ${issue.level.toUpperCase()} \`${issue.code}\`: ${escapeMarkdown(issue.message)}`,
+      ),
+      '',
+    );
+  }
+  return lines.join('\n').trimEnd();
+}

package/src/workflow-status/format-status.ts

@@ -1,5 +1,10 @@
 import { DEFAULT_STATUS_SHORTCUT } from '../config/types.ts';
-import { formatShortcutLabel } from './formatting.ts';
+import {
+  formatShortcutLabel,
+  formatStepName,
+  stepTitle,
+  workflowStatusIcon,
+} from './formatting.ts';
 import { renderBoard } from './render-board.ts';
 import type { WorkflowStatusSnapshot, WorkflowStatusTheme } from './types.ts';
 
@@ -9,18 +14,42 @@ const UNSTYLED_THEME = {
   bold: (value: string) => value,
 } as const satisfies WorkflowStatusTheme;
 
+/** Format the persistent main-UI progress line for a running workflow. */
+export function formatWorkflowProgressStatus(
+  snapshot: WorkflowStatusSnapshot,
+  statusShortcutLabel: string,
+): string {
+  const { run, workflow } = snapshot;
+  const currentStep = formatStepName(
+    stepTitle(workflow, run.currentStepId),
+    run.currentStepId,
+  );
+  const activity =
+    run.status === 'awaiting-gate' ? 'awaiting review' : 'working';
+  return `${workflowStatusIcon(run, snapshot.now)} ${run.workflowId} · step ${currentStep} · ${activity} · ${statusShortcutLabel}`;
+}
+
 /** Format a plain-text workflow status suitable for fallback notifications. */
 export function formatWorkflowStatusText(
   snapshot: WorkflowStatusSnapshot,
 ): string {
-  const { run } = snapshot;
+  const { run, workflow } = snapshot;
   const lines = [
-    `Workflow: ${run.workflowId}`,
+    `Workflow ID: ${run.workflowId}`,
+    ...(workflow
+      ? [
+          `Command: /${workflow.definition.command}`,
+          `Description: ${workflow.definition.description}`,
+        ]
+      : []),
     `Run: ${run.runId}`,
     `Status: ${run.status}`,
     `Step: ${run.currentStepId}`,
     `Completed steps: ${run.history.length}`,
   ];
+  if (run.cwd && run.startCwd && run.cwd !== run.startCwd) {
+    lines.push(`Workspace: ${run.cwd}`);
+  }
   if (run.pendingGate?.reviewId) {
     lines.push(`Review: ${run.pendingGate.reviewId}`);
   }

package/src/workflow-status/render-board.ts

@@ -12,6 +12,7 @@ export function renderBoard(
   width: number,
   shouldShowCloseHint: boolean,
   statusShortcutLabel: string,
+  selectedIndex?: number,
 ): Array<string> {
   const header = boxed(
     theme,
@@ -23,8 +24,8 @@ export function renderBoard(
 
   const body =
     width >= WIDE_LAYOUT_MIN_COLUMNS
-      ? renderWideBody(theme, snapshot, width)
-      : renderNarrowBody(theme, snapshot, width);
+      ? renderWideBody(theme, snapshot, width, selectedIndex)
+      : renderNarrowBody(theme, snapshot, width, selectedIndex);
   const lines = [...header, '', ...body];
   return shouldShowCloseHint
     ? [
@@ -39,6 +40,7 @@ function renderWideBody(
   theme: WorkflowStatusTheme,
   snapshot: WorkflowStatusSnapshot,
   width: number,
+  selectedIndex?: number,
 ): Array<string> {
   const gap = 2;
   const summaryWidth = Math.min(42, Math.max(36, Math.floor(width * 0.36)));
@@ -53,7 +55,7 @@ function renderWideBody(
     theme,
     'Execution Path',
     pathWidth,
-    renderPathLines(theme, snapshot, pathWidth - 4),
+    renderPathLines(theme, snapshot, pathWidth - 4, selectedIndex),
     'borderAccent',
   );
   return joinPanels(summary, summaryWidth, path, pathWidth, gap);
@@ -63,6 +65,7 @@ function renderNarrowBody(
   theme: WorkflowStatusTheme,
   snapshot: WorkflowStatusSnapshot,
   width: number,
+  selectedIndex?: number,
 ): Array<string> {
   return [
     ...boxed(
@@ -76,7 +79,7 @@ function renderNarrowBody(
       theme,
       'Execution Path',
       width,
-      renderPathLines(theme, snapshot, width - 4),
+      renderPathLines(theme, snapshot, width - 4, selectedIndex),
       'borderAccent',
     ),
   ];

package/src/workflow-status/render-path.ts

@@ -22,8 +22,11 @@ function historyPathEntry(
   workflow: LoadedWorkflow | undefined,
   entry: StepHistoryEntry,
   visit: number,
+  index: number,
 ): PathEntry {
   return {
+    index,
+    historyIndex: index,
     stepId: entry.stepId,
     title: stepTitle(workflow, entry.stepId),
     status: 'completed',
@@ -39,16 +42,17 @@ export function buildPathEntries(
 ): Array<PathEntry> {
   const { run, workflow } = snapshot;
   const visits = new Map<string, number>();
-  const completedEntries = run.history.map((entry) => {
+  const completedEntries = run.history.map((entry, index) => {
     const visit = (visits.get(entry.stepId) ?? 0) + 1;
     visits.set(entry.stepId, visit);
-    return historyPathEntry(workflow, entry, visit);
+    return historyPathEntry(workflow, entry, visit, index);
   });
 
   if (run.status !== 'completed') {
     return [
       ...completedEntries,
       {
+        index: completedEntries.length,
         stepId: run.currentStepId,
         title: stepTitle(workflow, run.currentStepId),
         status: runDisplayStatus(run),
@@ -67,6 +71,7 @@ export function buildPathEntries(
     return [
       ...completedEntries,
       {
+        index: completedEntries.length,
         stepId: run.currentStepId,
         title: stepTitle(workflow, run.currentStepId),
         status: 'completed',
@@ -83,13 +88,24 @@ export function renderPathLines(
   theme: WorkflowStatusTheme,
   snapshot: WorkflowStatusSnapshot,
   width: number,
+  selectedIndex?: number,
 ): Array<string> {
   const entries = buildPathEntries(snapshot);
   if (entries.length === 0) {
     return [theme.fg('muted', 'No step attempts recorded')];
   }
 
-  const hidden = Math.max(0, entries.length - MAX_PATH_ROWS);
+  const selection = Math.max(
+    0,
+    Math.min(selectedIndex ?? entries.length - 1, entries.length - 1),
+  );
+  const maximumStart = Math.max(0, entries.length - MAX_PATH_ROWS);
+  const windowStart = Math.max(
+    0,
+    Math.min(selection - Math.floor(MAX_PATH_ROWS / 2), maximumStart),
+  );
+  const hidden = windowStart;
+  const hiddenAfter = Math.max(0, entries.length - windowStart - MAX_PATH_ROWS);
   const prefix =
     hidden > 0
       ? [
@@ -99,25 +115,36 @@ export function renderPathLines(
           ),
         ]
       : [];
-  const visibleRows = entries.slice(hidden).map((entry) => {
-    const visit =
-      entry.visit > 1 ? theme.fg('dim', ` · visit ${entry.visit}`) : '';
-    const left = `${statusGlyph(theme, entry.status, snapshot.now)} ${theme.fg(
-      entry.isCurrent ? 'text' : 'muted',
-      entry.title,
-    )}${visit}`;
-    const right = entry.outcome
-      ? `${statusLabel(entry.status)} · ${inline(entry.outcome)}`
-      : statusLabel(entry.status);
-    const row = joinColumns(
-      left,
-      theme.fg(statusColor(entry.status), right),
-      width,
-      Math.max(12, Math.floor(width * 0.58)),
-    );
-    return entry.isCurrent
-      ? theme.bg('selectedBg', padAnsi(row, width))
-      : truncateToWidth(row, width);
-  });
-  return [...prefix, ...visibleRows];
+  const visibleRows = entries
+    .slice(windowStart, windowStart + MAX_PATH_ROWS)
+    .map((entry) => {
+      const visit =
+        entry.visit > 1 ? theme.fg('dim', ` · visit ${entry.visit}`) : '';
+      const left = `${statusGlyph(theme, entry.status, snapshot.now)} ${theme.fg(
+        entry.isCurrent ? 'text' : 'muted',
+        entry.title,
+      )}${visit}`;
+      const right = entry.outcome
+        ? `${statusLabel(entry.status)} · ${inline(entry.outcome)}`
+        : statusLabel(entry.status);
+      const row = joinColumns(
+        left,
+        theme.fg(statusColor(entry.status), right),
+        width,
+        Math.max(12, Math.floor(width * 0.58)),
+      );
+      return entry.index === selection
+        ? theme.bg('selectedBg', padAnsi(row, width))
+        : truncateToWidth(row, width);
+    });
+  const suffix =
+    hiddenAfter > 0
+      ? [
+          theme.fg(
+            'dim',
+            `… ${hiddenAfter} later attempt${hiddenAfter === 1 ? '' : 's'}`,
+          ),
+        ]
+      : [];
+  return [...prefix, ...visibleRows, ...suffix];
 }