@osolmaz/pi-workflows 0.5.1 → 0.5.2

package/src/extension/widget.ts

@@ -1,6 +1,7 @@
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { ansi, stripAnsi } from "../render/ansi.js";
-import { renderGraphLines } from "../render/graph-render.js";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { ansi } from "../render/ansi.js";
+import { formatDuration } from "../render/format.js";
+import { nodeTypeGlyph } from "../render/node-type.js";
 import { sanitizeText } from "../workflows/text.js";
 import type {
   WorkflowDefinitionSnapshot,
@@ -20,9 +21,10 @@ const STATUS_GLYPHS: Record<WorkflowRunStatus, string> = {
 /**
  * pi renders at most this many widget lines (InteractiveMode.MAX_WIDGET_LINES)
  * and appends its own "(widget truncated)" marker beyond it. Stay inside the
- * budget and choose which graph rows to show instead of losing the bottom.
+ * budget and choose which node rows to show instead of losing the bottom.
  */
 const PI_MAX_WIDGET_LINES = 10;
+const MAX_NODE_ERROR_CHARS = 120;
 
 export function nodeGlyph(state: WorkflowRunState, nodeId: string): string {
   if (state.currentNode === nodeId) {
@@ -43,36 +45,29 @@ export function displayNodeIds(snapshot: WorkflowDefinitionSnapshot): string[] {
   return Object.keys(snapshot.nodes);
 }
 
-export type WidgetLayout = "graph" | "compact";
-
-export type WidgetScrollState = Record<WidgetLayout, number | null>;
-
 export type WidgetView = {
   lines: string[];
-  layout: WidgetLayout;
-  /** The clamped first visible row for the selected layout. */
+  /** The clamped first visible node row. */
   scroll: number;
-  /** Largest useful scroll value; 0 when the whole graph fits. */
+  /** Largest useful scroll value; 0 when the whole list fits. */
   maxScroll: number;
 };
 
 /**
- * Live-progress view for the in-pi widget: a header plus the same boxed
- * graph the standalone viewer draws. When the graph is taller than pi's
- * widget budget, a window is shown with ↑/↓ overflow markers — centered on
- * the active node by default, or at `scroll` when the user scrolled
- * manually. Pure so it can be tested without a TUI.
+ * Compact live-progress view for the in-pi widget. It uses one line per node,
+ * follows the active node by default, and never returns a line wider than the
+ * width supplied by Pi's component renderer.
  */
 export function buildWidgetView(
   state: WorkflowRunState,
   snapshot: WorkflowDefinitionSnapshot,
   now: Date = new Date(),
-  scroll: WidgetScrollState = { graph: null, compact: null },
+  scroll: number | null = null,
   held = false,
   width = Number.POSITIVE_INFINITY,
 ): WidgetView {
   const availableWidth = Number.isFinite(width) ? Math.max(0, Math.floor(width)) : width;
-  if (availableWidth === 0) return { lines: [], layout: "compact", scroll: 0, maxScroll: 0 };
+  if (availableWidth === 0) return { lines: [], scroll: 0, maxScroll: 0 };
 
   // `held` covers pauses the state cannot see yet: an escape-interrupted
   // step or a pause requested while the current node is still finishing.
@@ -93,58 +88,25 @@ export function buildWidgetView(
   }
 
   const budget = PI_MAX_WIDGET_LINES - 1 - footer.length;
-  const graph = renderGraphLines({ state, snapshot }, state.steps.length - 1, now, {
-    nodeStyle: "box",
-  });
-  if (graph.length > 0) {
-    const graphScroll = scroll.graph;
-    const windowed = windowLines(
-      graph,
-      budget,
-      graphScroll ?? focusLine(graph, state),
-      graphScroll !== null,
-    );
-    const graphLines = windowed.lines.map((line) => `  ${line}`);
-    if (graphLines.every((line) => visibleWidth(line) <= availableWidth)) {
-      return {
-        lines: fitLines([header, ...graphLines, ...footer], availableWidth),
-        layout: "graph",
-        scroll: windowed.scroll,
-        maxScroll: windowed.maxScroll,
-      };
-    }
-  }
-
-  return compactWidgetView(state, snapshot, header, footer, budget, availableWidth, scroll.compact);
-}
-
-function compactWidgetView(
-  state: WorkflowRunState,
-  snapshot: WorkflowDefinitionSnapshot,
-  header: string,
-  footer: string[],
-  budget: number,
-  width: number,
-  scroll: number | null,
-): WidgetView {
-  const nodes = displayNodeIds(snapshot).map((nodeId) => compactNodeLine(state, snapshot, nodeId));
+  const nodes = displayNodeIds(snapshot).map((nodeId) =>
+    compactNodeLine(state, snapshot, nodeId, now),
+  );
   if (nodes.length === 0) {
     return {
-      lines: fitLines([header, ...footer], width),
-      layout: "compact",
+      lines: fitLines([header, ...footer], availableWidth),
       scroll: 0,
       maxScroll: 0,
     };
   }
+
   const anchor = scroll ?? compactFocusIndex(state, snapshot);
   const windowed = windowLines(nodes, budget, anchor, scroll !== null);
-  const indentation = width >= 3 ? "  " : "";
+  const indentation = availableWidth >= 3 ? "  " : "";
   return {
     lines: fitLines(
       [header, ...windowed.lines.map((line) => `${indentation}${line}`), ...footer],
-      width,
+      availableWidth,
     ),
-    layout: "compact",
     scroll: windowed.scroll,
     maxScroll: windowed.maxScroll,
   };
@@ -162,14 +124,68 @@ function compactNodeLine(
   state: WorkflowRunState,
   snapshot: WorkflowDefinitionSnapshot,
   nodeId: string,
+  now: Date,
 ): string {
   const node = snapshot.nodes[nodeId];
-  const type = node?.nodeType === undefined ? "" : ` · ${node.nodeType}`;
-  const detail =
-    state.currentNode === nodeId && state.statusDetail
-      ? ` · ${sanitizeText(state.statusDetail)}`
-      : "";
-  return `${nodeGlyph(state, nodeId)} ${sanitizeText(nodeId)}${type}${detail}`;
+  const type = node ? ansi.dim(nodeTypeGlyph(node.nodeType, node.actionExecution)) : "?";
+  const segments = nodeRuntimeSegments(state, snapshot, nodeId, now);
+  const detail = segments.length > 0 ? ` · ${segments.join(" · ")}` : "";
+  return `${nodeGlyph(state, nodeId)} ${type} ${sanitizeText(nodeId)}${detail}`;
+}
+
+function nodeRuntimeSegments(
+  state: WorkflowRunState,
+  snapshot: WorkflowDefinitionSnapshot,
+  nodeId: string,
+  now: Date,
+): string[] {
+  const segments: string[] = [];
+  const completedAttempts = state.steps.filter((step) => step.nodeId === nodeId).length;
+  const attempts = completedAttempts + (state.currentNode === nodeId ? 1 : 0);
+  if (attempts > 1) {
+    segments.push(`↻${attempts}`);
+  }
+
+  const result = state.results[nodeId];
+  if (state.currentNode === nodeId) {
+    if (state.statusDetail) {
+      segments.push(sanitizeText(state.statusDetail));
+    }
+    const elapsed = elapsedSince(state.currentNodeStartedAt, now);
+    if (elapsed !== null) {
+      segments.push(elapsed);
+    }
+    return segments;
+  }
+
+  if (state.waitingOn === nodeId) {
+    const summary = snapshot.nodes[nodeId]?.summary;
+    segments.push(summary ? sanitizeText(summary) : "waiting");
+    return segments;
+  }
+
+  if (!result) {
+    return segments;
+  }
+  if (result.outcome !== "ok") {
+    segments.push(
+      result.error
+        ? truncate(sanitizeText(result.error), MAX_NODE_ERROR_CHARS)
+        : result.outcome.replaceAll("_", " "),
+    );
+    return segments;
+  }
+  if (Number.isFinite(result.durationMs)) {
+    segments.push(formatDuration(result.durationMs));
+  }
+  return segments;
+}
+
+function elapsedSince(startedAt: string | undefined, now: Date): string | null {
+  if (!startedAt) return null;
+  const started = Date.parse(startedAt);
+  if (!Number.isFinite(started)) return null;
+  return formatDuration(Math.max(0, now.getTime() - started));
 }
 
 function fitLines(lines: string[], width: number): string[] {
@@ -177,7 +193,7 @@ function fitLines(lines: string[], width: number): string[] {
   return lines.map((line) => truncateToWidth(line, width, width > 1 ? "…" : ""));
 }
 
-/** Back-compatible line view following the active node. */
+/** Compact line view following the active node. */
 export function buildWidgetLines(
   state: WorkflowRunState,
   snapshot: WorkflowDefinitionSnapshot,
@@ -186,29 +202,6 @@ export function buildWidgetLines(
   return buildWidgetView(state, snapshot, now).lines;
 }
 
-/** The graph row the window should center on: the active or waiting node. */
-function focusLine(graph: string[], state: WorkflowRunState): number {
-  const active = graph.findIndex((line) => stripAnsi(line).includes("◐"));
-  const focus =
-    active !== -1
-      ? active
-      : state.waitingOn
-        ? graph.findIndex((line) => stripAnsi(line).includes(state.waitingOn as string))
-        : -1;
-  if (focus === -1) {
-    return graph.length - 1;
-  }
-  let top = focus;
-  while (top > 0 && !/[┌┏]/u.test(stripAnsi(graph[top] ?? ""))) {
-    top -= 1;
-  }
-  let bottom = focus;
-  while (bottom + 1 < graph.length && !/[└┗]/u.test(stripAnsi(graph[bottom] ?? ""))) {
-    bottom += 1;
-  }
-  return Math.floor((top + bottom) / 2);
-}
-
 /**
  * Slice `lines` to at most `budget` rows, marking hidden rows at either end.
  * Markers count against the budget. `anchor` is a row to center on (follow
@@ -223,8 +216,6 @@ function windowLines(
   if (lines.length <= budget) {
     return { lines, scroll: 0, maxScroll: 0 };
   }
-  // Reserve one combined overflow row, leaving seven rows for a complete
-  // full card even when the widget also has an error footer.
   const inner = Math.max(1, budget - 1);
   const start = clampStart(anchor, inner, lines.length, anchorIsStart);
   const end = start + inner;

package/src/render/graph-render.ts

@@ -13,6 +13,7 @@ import {
   type GraphLayout,
   type GraphSegment,
 } from "./graph.js";
+import { nodeTypeBadge } from "./node-type.js";
 
 /**
  * Renders the workflow DAG as text, mirroring the acpx replay viewer's graph
@@ -76,14 +77,6 @@ const GRAPH_SIDE_MARGIN = 2;
 const CARD_MIN_CONTENT_WIDTH = 28;
 const CARD_DYNAMIC_RESERVE = "↻ 100  ◷ 9999d 23h 59m 59s";
 
-const NODE_TYPE_GLYPHS: Record<string, string> = {
-  agent: "●",
-  compute: "ƒ",
-  notify: "✉",
-  action: "⚙",
-  checkpoint: "◆",
-};
-
 function nodeTypeStyle(nodeType: string): CanvasStyle {
   switch (nodeType) {
     case "agent":
@@ -98,10 +91,6 @@ function nodeTypeStyle(nodeType: string): CanvasStyle {
   }
 }
 
-function nodeTypeBadge(nodeType: string): string {
-  return `${NODE_TYPE_GLYPHS[nodeType] ?? "?"} ${nodeType}`;
-}
-
 function fitText(text: string, width: number): string {
   const chars = [...text];
   if (chars.length <= width) return text;
@@ -228,7 +217,7 @@ function cardMetrics(view: GraphView): CardMetrics {
   }
   for (const [nodeId, node] of Object.entries(snapshot.nodes)) {
     measure(sanitizeText(nodeId));
-    measure(nodeTypeBadge(node.nodeType));
+    measure(nodeTypeBadge(node.nodeType, node.actionExecution));
     const labels = nodeBranchLabels(view, nodeId);
     branchRows = Math.max(branchRows, labels.length);
     for (const label of labels) measure(`◇ ${label}`);
@@ -252,6 +241,7 @@ type RenderedCell = {
   text: string;
   nodeId: string;
   nodeType: string;
+  typeBadge: string;
   status: NodeStatus | null;
   attempts: number;
   elapsed: string;
@@ -277,6 +267,7 @@ function renderCellText(
       text: "",
       nodeId: "",
       nodeType: "",
+      typeBadge: "",
       status: null,
       attempts: 0,
       elapsed: "",
@@ -334,6 +325,7 @@ function renderCellText(
     text,
     nodeId: sanitizeText(nodeId),
     nodeType,
+    typeBadge: node ? nodeTypeBadge(node.nodeType, node.actionExecution) : "? unknown",
     status,
     attempts: count,
     elapsed,
@@ -729,7 +721,7 @@ function drawNodeBox(
   canvas.text(startX, y + 2, `${chars.ml}${horizontal}${chars.mr}`, borderStyle);
   pairedRow(
     y + 3,
-    nodeTypeBadge(rendered.nodeType),
+    rendered.typeBadge,
     typeStyle,
     `${STATUS_GLYPHS[status]} ${STATUS_LABELS[status]}`,
     borderStyle,

package/src/render/node-type.ts

@@ -0,0 +1,28 @@
+import type { WorkflowNodeSnapshot } from "../workflows/types.js";
+
+const NODE_TYPE_GLYPHS: Readonly<Record<WorkflowNodeSnapshot["nodeType"], string>> = {
+  agent: "●",
+  compute: "ƒ",
+  notify: "!",
+  action: "*",
+  checkpoint: "◆",
+};
+
+/** A stable one-column glyph for a workflow node or action subtype. */
+export function nodeTypeGlyph(
+  nodeType: WorkflowNodeSnapshot["nodeType"],
+  actionExecution?: WorkflowNodeSnapshot["actionExecution"],
+): string {
+  if (nodeType === "action" && actionExecution === "shell") {
+    return "$";
+  }
+  return NODE_TYPE_GLYPHS[nodeType];
+}
+
+/** The graph viewer badge keeps the readable type name beside its glyph. */
+export function nodeTypeBadge(
+  nodeType: WorkflowNodeSnapshot["nodeType"],
+  actionExecution?: WorkflowNodeSnapshot["actionExecution"],
+): string {
+  return `${nodeTypeGlyph(nodeType, actionExecution)} ${nodeType}`;
+}