@osolmaz/pi-workflows 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osolmaz/pi-workflows",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Workflow and controller runtime with a live terminal viewer for the pi coding agent",
   "keywords": [
     "pi-package"

package/src/extension/index.ts

@@ -1,6 +1,6 @@
 import { randomUUID } from "node:crypto";
 import { isDeepStrictEqual } from "node:util";
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import { builtinWorkflowCatalog } from "../builtins/catalog.js";
 import { projectControllerStorePath, SqliteControllerStore } from "../controllers/index.js";
 import type { JsonObject } from "../controllers/types.js";
@@ -36,7 +36,7 @@ import {
 } from "./controller-host.js";
 import { ConversationStepExecutor } from "./executor.js";
 import { SessionRecorder } from "./recorder.js";
-import { buildWidgetView, type WidgetLayout, type WidgetScrollState } from "./widget.js";
+import { buildWidgetView } from "./widget.js";
 import { WorkflowToolParameters, type WorkflowToolInput } from "./workflow-tool.js";
 
 const RUN_CLAIM_LEASE_MS = 30_000;
@@ -209,7 +209,7 @@ type WorkflowWidgetComponent = {
   invalidate: () => void;
 };
 
-type WorkflowWidgetFactory = () => WorkflowWidgetComponent;
+type WorkflowWidgetFactory = (_tui: unknown, theme: Theme) => WorkflowWidgetComponent;
 type WorkflowWidgetContent = string[] | WorkflowWidgetFactory;
 
 export default function piWorkflows(pi: ExtensionAPI) {
@@ -313,12 +313,11 @@ export default function piWorkflows(pi: ExtensionAPI) {
   let widgetTimer: NodeJS.Timeout | null = null;
   let widgetTicker: NodeJS.Timeout | null = null;
   // Manual widget scroll: null follows the active node; a number is the
-  // first visible graph row, set by shift+↑/↓ and reset on step advance.
+  // first visible node row, set by shift+↑/↓ and reset on step advance.
   let widgetSource: WidgetSource | null = null;
-  let widgetScroll: WidgetScrollState = { graph: null, compact: null };
+  let widgetScroll: number | null = null;
   let widgetShownScroll = 0;
   let widgetMaxScroll = 0;
-  let widgetLayout: WidgetLayout | null = null;
   let widgetStepCount = 0;
   let sessionClosed = false;
   let runGeneration = 0;
@@ -378,7 +377,7 @@ export default function piWorkflows(pi: ExtensionAPI) {
     if (!widgetSource) {
       return;
     }
-    const render = (width = Number.POSITIVE_INFINITY): string[] => {
+    const render = (width = Number.POSITIVE_INFINITY, theme?: Theme): string[] => {
       if (!widgetSource) return [];
       const view = buildWidgetView(
         widgetSource.state,
@@ -387,17 +386,20 @@ export default function piWorkflows(pi: ExtensionAPI) {
         widgetScroll,
         runHeld(),
         width,
+        theme,
       );
-      widgetLayout = view.layout;
       widgetShownScroll = view.scroll;
       widgetMaxScroll = view.maxScroll;
-      if (widgetScroll[view.layout] !== null) {
-        widgetScroll[view.layout] = view.scroll;
+      if (widgetScroll !== null) {
+        widgetScroll = view.scroll;
       }
       return view.lines;
     };
     if (ctx.mode === "tui") {
-      setWidget(ctx, () => ({ render, invalidate() {} }));
+      setWidget(ctx, (_tui, theme) => ({
+        render: (width) => render(width, theme),
+        invalidate() {},
+      }));
     } else {
       // RPC transports string widgets but cannot serialize TUI component factories.
       setWidget(ctx, render());
@@ -413,7 +415,7 @@ export default function piWorkflows(pi: ExtensionAPI) {
     if (state.steps.length !== widgetStepCount) {
       widgetStepCount = state.steps.length;
       // The workflow moved on; resume following the active node.
-      widgetScroll = { graph: null, compact: null };
+      widgetScroll = null;
     }
     widgetSource = { state, snapshot };
     renderWidget(ctx);
@@ -421,8 +423,7 @@ export default function piWorkflows(pi: ExtensionAPI) {
 
   const clearWidget = (ctx: ExtensionContext) => {
     widgetSource = null;
-    widgetScroll = { graph: null, compact: null };
-    widgetLayout = null;
+    widgetScroll = null;
     setWidget(ctx, undefined);
     setStatus(ctx, undefined);
   };
@@ -431,8 +432,7 @@ export default function piWorkflows(pi: ExtensionAPI) {
     if (!widgetSource || widgetMaxScroll === 0) {
       return;
     }
-    if (widgetLayout === null) return;
-    widgetScroll[widgetLayout] = Math.max(0, Math.min(widgetShownScroll + delta, widgetMaxScroll));
+    widgetScroll = Math.max(0, Math.min(widgetShownScroll + delta, widgetMaxScroll));
     renderWidget(ctx);
   };
 
@@ -1813,8 +1813,7 @@ export default function piWorkflows(pi: ExtensionAPI) {
     clearWidgetTimer();
     stopWidgetTicker();
     widgetSource = null;
-    widgetScroll = { graph: null, compact: null };
-    widgetLayout = null;
+    widgetScroll = null;
   });
 }
 

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 type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+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,32 @@ 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 WidgetTheme = Pick<Theme, "bold" | "fg">;
 
 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,
+  theme?: WidgetTheme,
 ): 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.
@@ -82,69 +80,39 @@ export function buildWidgetView(
   // Titles, status details, and errors can carry model- or shell-controlled
   // text; never let escape sequences or newlines reach the terminal.
   const title = state.runTitle ? ` — ${sanitizeText(state.runTitle)}` : "";
-  const header = `${glyph} workflow ${sanitizeText(state.workflowName)}${title} [${statusText}]`;
+  const headerTone = statusTone(paused ? "waiting" : state.status);
+  const header = `${paint(theme, headerTone, glyph)} workflow ${sanitizeText(state.workflowName)}${title} ${paint(theme, headerTone, `[${statusText}]`)}`;
 
   const footer: string[] = [];
   if (state.error) {
-    footer.push(`  error: ${truncate(sanitizeText(state.error), 120)}`);
+    footer.push(paint(theme, "error", `  error: ${truncate(sanitizeText(state.error), 120)}`));
   }
   if (state.status === "waiting" && 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 graphScroll = scroll.graph;
-    const windowed = windowLines(
-      graph,
-      budget,
-      graphScroll ?? focusLine(graph, state),
-      graphScroll !== null,
+    footer.push(
+      paint(theme, "warning", `  waiting on checkpoint: ${sanitizeText(state.waitingOn)}`),
     );
-    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 budget = PI_MAX_WIDGET_LINES - 1 - footer.length;
+  const nodes = displayNodeIds(snapshot).map((nodeId) =>
+    compactNodeLine(state, snapshot, nodeId, now, paused, theme),
+  );
   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 windowed = windowLines(nodes, budget, anchor, scroll !== null, theme);
+  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 +130,116 @@ function compactNodeLine(
   state: WorkflowRunState,
   snapshot: WorkflowDefinitionSnapshot,
   nodeId: string,
+  now: Date,
+  paused: boolean,
+  theme?: WidgetTheme,
 ): 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 glyph = nodeGlyph(state, nodeId);
+  const typeGlyph = node ? nodeTypeGlyph(node.nodeType, node.actionExecution) : "?";
+  const name = sanitizeText(nodeId);
+  const segments = nodeRuntimeSegments(state, snapshot, nodeId, now);
+  const isCurrent = state.currentNode === nodeId;
+  const isWaiting = state.waitingOn === nodeId;
+
+  if (isCurrent || isWaiting) {
+    const tone = paused || isWaiting ? "warning" : "accent";
+    const focusedName = theme ? theme.bold(name) : name;
+    const detail = segments.length > 0 ? ` · ${segments.join(" · ")}` : "";
+    return paint(theme, tone, `${glyph} ${typeGlyph} ${focusedName}${detail}`);
+  }
+
+  const result = state.results[nodeId];
+  if (!result) {
+    const detail = segments.length > 0 ? ` · ${segments.join(" · ")}` : "";
+    return paint(theme, "dim", `${glyph} ${typeGlyph} ${name}${detail}`);
+  }
+
+  const styledGlyph = paint(theme, result.outcome === "ok" ? "success" : "error", glyph);
+  const styledType = paint(theme, "dim", typeGlyph);
+  const styledSegments = segments.map((segment, index) =>
+    paint(
+      theme,
+      result.outcome !== "ok" && index === segments.length - 1 ? "error" : "dim",
+      segment,
+    ),
+  );
+  const detail = styledSegments.length > 0 ? ` · ${styledSegments.join(" · ")}` : "";
+  return `${styledGlyph} ${styledType} ${name}${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 statusTone(status: WorkflowRunStatus): ThemeColor {
+  switch (status) {
+    case "completed":
+      return "success";
+    case "failed":
+    case "timed_out":
+    case "cancelled":
+      return "error";
+    case "waiting":
+      return "warning";
+    case "running":
+      return "accent";
+  }
+}
+
+function paint(theme: WidgetTheme | undefined, color: ThemeColor, text: string): string {
+  return theme ? theme.fg(color, text) : text;
 }
 
 function fitLines(lines: string[], width: number): string[] {
@@ -177,7 +247,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 +256,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
@@ -219,12 +266,11 @@ function windowLines(
   budget: number,
   anchor: number,
   anchorIsStart: boolean,
+  theme?: WidgetTheme,
 ): { lines: string[]; scroll: number; maxScroll: number } {
   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;
@@ -234,7 +280,7 @@ function windowLines(
   const directions = [above > 0 ? `↑ ${above}` : "", below > 0 ? `↓ ${below}` : ""]
     .filter(Boolean)
     .join(" · ");
-  out.push(ansi.dim(`${directions} more · shift+↑/↓ scroll`));
+  out.push(paint(theme, "dim", `${directions} more · shift+↑/↓ scroll`));
   return { lines: out, scroll: start, maxScroll: Math.max(0, lines.length - 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}`;
+}