@osolmaz/pi-workflows 0.5.0 → 0.5.2

package/src/extension/widget.ts

@@ -1,5 +1,7 @@
-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,
@@ -19,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) {
@@ -44,18 +47,16 @@ export function displayNodeIds(snapshot: WorkflowDefinitionSnapshot): string[] {
 
 export type WidgetView = {
   lines: string[];
-  /** The clamped first visible graph row; feed back in to scroll relatively. */
+  /** 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,
@@ -63,7 +64,11 @@ export function buildWidgetView(
   now: Date = new Date(),
   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: [], 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.
   const paused = held || state.paused === true;
@@ -79,58 +84,122 @@ export function buildWidgetView(
     footer.push(`  error: ${truncate(sanitizeText(state.error), 120)}`);
   }
   if (state.status === "waiting" && state.waitingOn) {
-    footer.push(`  waiting on checkpoint: ${state.waitingOn}`);
+    footer.push(`  waiting on checkpoint: ${sanitizeText(state.waitingOn)}`);
   }
 
   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 nodes = displayNodeIds(snapshot).map((nodeId) =>
+    compactNodeLine(state, snapshot, nodeId, now),
+  );
+  if (nodes.length === 0) {
     return {
-      lines: [header, `  ${compactNodeStrip(state, snapshot)}`, ...footer],
+      lines: fitLines([header, ...footer], availableWidth),
       scroll: 0,
       maxScroll: 0,
     };
   }
-  const windowed = windowLines(graph, budget, scroll ?? focusLine(graph, state), scroll !== null);
+
+  const anchor = scroll ?? compactFocusIndex(state, snapshot);
+  const windowed = windowLines(nodes, budget, anchor, scroll !== null);
+  const indentation = availableWidth >= 3 ? "  " : "";
   return {
-    lines: [header, ...windowed.lines.map((line) => `  ${line}`), ...footer],
+    lines: fitLines(
+      [header, ...windowed.lines.map((line) => `${indentation}${line}`), ...footer],
+      availableWidth,
+    ),
     scroll: windowed.scroll,
     maxScroll: windowed.maxScroll,
   };
 }
 
-/** Back-compatible line view following the active node. */
-export function buildWidgetLines(
+function compactFocusIndex(state: WorkflowRunState, snapshot: WorkflowDefinitionSnapshot): number {
+  const nodeIds = displayNodeIds(snapshot);
+  const focused = state.currentNode ?? state.waitingOn;
+  if (focused === undefined) return Math.max(0, nodeIds.length - 1);
+  const index = nodeIds.indexOf(focused);
+  return index === -1 ? Math.max(0, nodeIds.length - 1) : index;
+}
+
+function compactNodeLine(
   state: WorkflowRunState,
   snapshot: WorkflowDefinitionSnapshot,
-  now: Date = new Date(),
-): string[] {
-  return buildWidgetView(state, snapshot, now).lines;
+  nodeId: string,
+  now: Date,
+): string {
+  const node = snapshot.nodes[nodeId];
+  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}`;
 }
 
-/** 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;
+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}`);
   }
-  let top = focus;
-  while (top > 0 && !/[┌┏]/u.test(stripAnsi(graph[top] ?? ""))) {
-    top -= 1;
+
+  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;
   }
-  let bottom = focus;
-  while (bottom + 1 < graph.length && !/[└┗]/u.test(stripAnsi(graph[bottom] ?? ""))) {
-    bottom += 1;
+
+  if (state.waitingOn === nodeId) {
+    const summary = snapshot.nodes[nodeId]?.summary;
+    segments.push(summary ? sanitizeText(summary) : "waiting");
+    return segments;
   }
-  return Math.floor((top + bottom) / 2);
+
+  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[] {
+  if (!Number.isFinite(width)) return lines;
+  return lines.map((line) => truncateToWidth(line, width, width > 1 ? "…" : ""));
+}
+
+/** Compact line view following the active node. */
+export function buildWidgetLines(
+  state: WorkflowRunState,
+  snapshot: WorkflowDefinitionSnapshot,
+  now: Date = new Date(),
+): string[] {
+  return buildWidgetView(state, snapshot, now).lines;
 }
 
 /**
@@ -147,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;
@@ -167,19 +234,6 @@ function clampStart(anchor: number, inner: number, total: number, anchorIsStart:
   return Math.max(0, Math.min(start, total - inner));
 }
 
-function compactNodeStrip(state: WorkflowRunState, snapshot: WorkflowDefinitionSnapshot): string {
-  return displayNodeIds(snapshot)
-    .map((nodeId) => {
-      const marker = nodeGlyph(state, nodeId);
-      const detail =
-        state.currentNode === nodeId && state.statusDetail
-          ? ` (${sanitizeText(state.statusDetail)})`
-          : "";
-      return `${marker} ${nodeId}${detail}`;
-    })
-    .join("  ");
-}
-
 function truncate(text: string, maxLength: number): string {
   return text.length <= maxLength ? text : `${text.slice(0, maxLength - 1)}…`;
 }

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}`;
+}