@osolmaz/pi-workflows 0.1.0 → 0.2.0

package/src/render/graph-render.ts

@@ -27,28 +27,89 @@ export type GraphView = {
   snapshot: WorkflowDefinitionSnapshot | null;
 };
 
-type NodeStatus = "completed" | "failed" | "active" | "waiting" | "queued" | "cancelled";
+type NodeStatus =
+  | "completed"
+  | "failed"
+  | "timed_out"
+  | "active"
+  | "replay_focus"
+  | "waiting"
+  | "queued"
+  | "cancelled";
 
 const STATUS_GLYPHS: Record<NodeStatus, string> = {
   completed: "✓",
   failed: "✗",
+  timed_out: "×",
   active: "◐",
+  replay_focus: "◆",
   waiting: "⏸",
   cancelled: "~",
   queued: "·",
 };
 
+const STATUS_LABELS: Record<NodeStatus, string> = {
+  completed: "completed",
+  failed: "failed",
+  timed_out: "timed out",
+  active: "running",
+  replay_focus: "replay focus",
+  waiting: "waiting",
+  cancelled: "cancelled",
+  queued: "queued",
+};
+
 const STATUS_STYLES: Record<NodeStatus, CanvasStyle> = {
   completed: "ok",
   failed: "fail",
+  timed_out: "fail",
   active: "active",
+  replay_focus: "active",
   waiting: "warn",
   cancelled: "warn",
   queued: "dim",
 };
 
-const CELL_GAP = 4;
+const CELL_GAP = 6;
 const GUTTER_GAP = 2;
+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: "ƒ",
+  action: "⚙",
+  checkpoint: "◆",
+};
+
+function nodeTypeStyle(nodeType: string): CanvasStyle {
+  switch (nodeType) {
+    case "agent":
+    case "compute":
+    case "action":
+    case "checkpoint":
+      return nodeType;
+    default:
+      return "dim";
+  }
+}
+
+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;
+  return width <= 1 ? chars.slice(0, width).join("") : `${chars.slice(0, width - 1).join("")}…`;
+}
+
+function centeredText(text: string, width: number): string {
+  const fitted = fitText(text, width);
+  const left = Math.max(0, Math.floor((width - [...fitted].length) / 2));
+  return `${" ".repeat(left)}${fitted}`;
+}
 
 /** How node cells are drawn: single text lines or bordered boxes. */
 export type GraphNodeStyle = "line" | "box";
@@ -57,9 +118,15 @@ export type GraphRenderOptions = {
   nodeStyle?: GraphNodeStyle;
 };
 
-/** Rows a node cell occupies: boxes add a border row above and below. */
-function cellHeight(nodeStyle: GraphNodeStyle): number {
-  return nodeStyle === "box" ? 3 : 1;
+type CardMetrics = {
+  width: number;
+  height: number;
+  contentWidth: number;
+  branchRows: number;
+};
+
+function cellHeight(nodeStyle: GraphNodeStyle, boxHeight: number): number {
+  return nodeStyle === "box" ? boxHeight : 1;
 }
 
 function paint(text: string, style: CanvasStyle): string {
@@ -71,9 +138,18 @@ function paint(text: string, style: CanvasStyle): string {
       return ansi.cyan(text);
     case "back":
     case "warn":
+    case "action":
       return ansi.yellow(text);
     case "fail":
       return ansi.red(text);
+    case "agent":
+      return ansi.green(text);
+    case "compute":
+      return ansi.blue(text);
+    case "checkpoint":
+      return ansi.magenta(text);
+    case "branch":
+      return ansi.cyan(text);
     case "dim":
       return ansi.dim(text);
     default:
@@ -110,13 +186,14 @@ function deriveNodeStatus(
   if (!attempt) {
     return "queued";
   }
-  // While scrubbing, the selected step's node reads as the active position.
   if (!atLatestStep && visibleSteps.at(-1)?.nodeId === nodeId) {
-    return "active";
+    return "replay_focus";
   }
   switch (attempt.outcome) {
     case "ok":
       return "completed";
+    case "timed_out":
+      return "timed_out";
     case "cancelled":
       return "cancelled";
     default:
@@ -124,10 +201,61 @@ function deriveNodeStatus(
   }
 }
 
+function nodeBranchLabels(view: GraphView, nodeId: string): string[] {
+  return (
+    view.snapshot?.edges.flatMap((edge) =>
+      edge.from === nodeId && "switch" in edge ? Object.keys(edge.switch.cases) : [],
+    ) ?? []
+  ).map(sanitizeText);
+}
+
+function cardMetrics(view: GraphView): CardMetrics {
+  const snapshot = view.snapshot;
+  if (!snapshot) {
+    return { width: CARD_MIN_CONTENT_WIDTH + 4, height: 7, contentWidth: 24, branchRows: 0 };
+  }
+  let contentWidth = CARD_MIN_CONTENT_WIDTH;
+  let branchRows = 0;
+  const measure = (text: string) => {
+    contentWidth = Math.max(contentWidth, text.length);
+  };
+  measure(CARD_DYNAMIC_RESERVE);
+  for (const status of Object.keys(STATUS_LABELS) as NodeStatus[]) {
+    measure(`${nodeTypeBadge("checkpoint")}  ${STATUS_GLYPHS[status]} ${STATUS_LABELS[status]}`);
+  }
+  for (const [nodeId, node] of Object.entries(snapshot.nodes)) {
+    measure(sanitizeText(nodeId));
+    measure(nodeTypeBadge(node.nodeType));
+    const labels = nodeBranchLabels(view, nodeId);
+    branchRows = Math.max(branchRows, labels.length);
+    for (const label of labels) measure(`◇ ${label}`);
+  }
+  return {
+    width: contentWidth + 4,
+    height: 7 + branchRows,
+    contentWidth,
+    branchRows,
+  };
+}
+
+/** Canonical outer dimensions shared by every full card in this graph. */
+export function graphCardSize(view: GraphView): { width: number; height: number } {
+  const { width, height } = cardMetrics(view);
+  return { width, height };
+}
+
 type RenderedCell = {
   cell: GraphCell;
   text: string;
+  nodeId: string;
+  nodeType: string;
   status: NodeStatus | null;
+  attempts: number;
+  elapsed: string;
+  detail: string;
+  branchLines: string[];
+  isStart: boolean;
+  isEnd: boolean;
   width: number;
 };
 
@@ -138,38 +266,80 @@ function renderCellText(
   atLatestStep: boolean,
   now: Date,
   nodeStyle: GraphNodeStyle,
+  metrics: CardMetrics,
 ): RenderedCell {
   if (cell.kind === "virtual") {
-    return { cell, text: "", status: null, width: 1 };
+    return {
+      cell,
+      text: "",
+      nodeId: "",
+      nodeType: "",
+      status: null,
+      attempts: 0,
+      elapsed: "",
+      detail: "",
+      branchLines: [],
+      isStart: false,
+      isEnd: false,
+      width: 1,
+    };
   }
   const state = view.state;
   const nodeId = cell.nodeId;
   const status = deriveNodeStatus(view, nodeId, visibleSteps, atLatestStep);
-  const nodeType = view.snapshot?.nodes[nodeId]?.nodeType ?? "?";
+  const node = view.snapshot?.nodes[nodeId];
+  const nodeType = node?.nodeType ?? "?";
   const attempt = latestVisibleAttempt(visibleSteps, nodeId);
   const attempts = visibleSteps.filter((step) => step.nodeId === nodeId).length;
-  const parts = [`${nodeId} [${nodeType}]`];
+  const labels = nodeBranchLabels(view, nodeId);
+  const outgoing =
+    view.snapshot?.edges
+      .filter((edge) => edge.from === nodeId)
+      .reduce(
+        (count, edge) => count + ("to" in edge ? 1 : Object.keys(edge.switch.cases).length),
+        0,
+      ) ?? 0;
+  const isStart = view.snapshot?.startAt === nodeId;
+  const isEnd = outgoing === 0;
+  let elapsed = "—";
   if (atLatestStep && state.currentNode === nodeId) {
     const startedAt = state.currentNodeStartedAt
       ? Date.parse(state.currentNodeStartedAt)
       : now.getTime();
-    parts.push(`running ${formatDuration(now.getTime() - startedAt)}`);
-    if (state.statusDetail) {
-      // statusDetail can be set by workflow authors; keep terminal-safe.
-      parts.push(`· ${sanitizeText(state.statusDetail)}`);
-    }
+    elapsed = formatDuration(now.getTime() - startedAt);
   } else if (attempt) {
     const durationMs = Date.parse(attempt.finishedAt) - Date.parse(attempt.startedAt);
-    parts.push(formatDuration(durationMs));
-  }
-  if (attempts > 1) {
-    parts.push(`×${attempts}`);
+    elapsed = formatDuration(durationMs);
   }
-  const text = parts.join(" ");
-  // Width includes the status glyph and the space after it; boxes add a
-  // border and one padding column on each side.
-  const contentWidth = text.length + 2;
-  return { cell, text, status, width: nodeStyle === "box" ? contentWidth + 4 : contentWidth };
+  const detail =
+    atLatestStep && state.currentNode === nodeId && state.statusDetail
+      ? sanitizeText(state.statusDetail)
+      : node?.statusDetail
+        ? sanitizeText(node.statusDetail)
+        : node?.summary
+          ? sanitizeText(node.summary)
+          : "";
+  const branchLines = Array.from({ length: metrics.branchRows }, (_, index) =>
+    labels[index] ? `◇ ${labels[index]}` : "",
+  );
+  const count = atLatestStep && state.currentNode === nodeId ? Math.max(attempts, 1) : attempts;
+  const timing =
+    attempt || count > 0 ? `${count} attempt${count === 1 ? "" : "s"} · ${elapsed}` : "not visited";
+  const text = `${nodeId} [${nodeType}] ${timing}`;
+  return {
+    cell,
+    text,
+    nodeId: sanitizeText(nodeId),
+    nodeType,
+    status,
+    attempts: count,
+    elapsed,
+    detail,
+    branchLines,
+    isStart,
+    isEnd,
+    width: nodeStyle === "box" ? metrics.width : text.length + 2,
+  };
 }
 
 type RankGeometry = {
@@ -221,6 +391,7 @@ export function renderGraphLines(
     return [];
   }
   const nodeStyle = options.nodeStyle ?? "line";
+  const metrics = cardMetrics(view);
   const layout = layoutGraph(snapshot);
   const steps = view.state.steps;
   const boundedIndex = Math.min(Math.max(selectedStepIndex, -1), steps.length - 1);
@@ -230,7 +401,9 @@ export function renderGraphLines(
   const activePair = derivePairInFlight(view, visibleSteps, atLatestStep);
 
   const rendered = layout.ranks.map((rank) =>
-    rank.map((cell) => renderCellText(view, cell, visibleSteps, atLatestStep, now, nodeStyle)),
+    rank.map((cell) =>
+      renderCellText(view, cell, visibleSteps, atLatestStep, now, nodeStyle, metrics),
+    ),
   );
 
   // Column positions: pack cells left to right per rank, then center every
@@ -239,7 +412,7 @@ export function renderGraphLines(
     (cells) =>
       cells.reduce((sum, cell) => sum + cell.width, 0) + Math.max(0, cells.length - 1) * CELL_GAP,
   );
-  const graphWidth = Math.max(0, ...rankWidths);
+  const graphWidth = Math.max(0, ...rankWidths) + GRAPH_SIDE_MARGIN * 2;
   const geometry: RankGeometry[] = rendered.map((cells, rankIndex) => {
     const centers: number[] = [];
     let x = Math.floor((graphWidth - (rankWidths[rankIndex] ?? 0)) / 2);
@@ -268,14 +441,14 @@ export function renderGraphLines(
   for (const [rankIndex, rank] of geometry.entries()) {
     placed.push({ ...rank, y });
     y +=
-      cellHeight(nodeStyle) +
+      cellHeight(nodeStyle, metrics.height) +
       lanes.below(rankIndex).length +
       gapRows(strips[rankIndex] as StripGeometry, rankIndex, layout.ranks.length) +
       lanes.above(rankIndex + 1).length;
   }
 
   const canvas = new CharCanvas();
-  drawNodes(canvas, placed, layout, transitions, nodeStyle);
+  drawNodes(canvas, placed, layout, transitions, nodeStyle, metrics.height);
   const labels = drawSegments(
     canvas,
     placed,
@@ -285,9 +458,10 @@ export function renderGraphLines(
     activePair,
     graphWidth,
     nodeStyle,
+    metrics.height,
     lanes,
   );
-  drawBackEdges(canvas, placed, layout, transitions, graphWidth, nodeStyle, lanes);
+  drawBackEdges(canvas, placed, layout, transitions, graphWidth, nodeStyle, metrics.height, lanes);
   // Labels go on last, once every line is on the canvas: placement can then
   // guarantee no later stroke crosses through a label.
   for (const label of labels) {
@@ -463,8 +637,8 @@ function fanOffsets(
 }
 
 const BOX_CHARS = {
-  light: { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" },
-  heavy: { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃" },
+  light: { tl: "┌", tr: "┐", ml: "├", mr: "┤", bl: "└", br: "┘", h: "─", v: "│" },
+  heavy: { tl: "┏", tr: "┓", ml: "┣", mr: "┫", bl: "┗", br: "┛", h: "━", v: "┃" },
 } as const;
 
 function drawNodes(
@@ -473,6 +647,7 @@ function drawNodes(
   layout: GraphLayout,
   transitions: Set<string>,
   nodeStyle: GraphNodeStyle,
+  boxHeight: number,
 ): void {
   for (const rank of placed) {
     for (const [index, rendered] of rank.cells.entries()) {
@@ -483,7 +658,12 @@ function drawNodes(
         const taken = edge ? transitions.has(`${edge.from}->${edge.to}`) : false;
         // Pass-through cells span the full cell height so the edge stays
         // visually continuous across the rank row(s).
-        canvas.vline(center, rank.y, rank.y + cellHeight(nodeStyle) - 1, taken ? "taken" : "dim");
+        canvas.vline(
+          center,
+          rank.y,
+          rank.y + cellHeight(nodeStyle, boxHeight) - 1,
+          taken ? "taken" : "dim",
+        );
         continue;
       }
       const status = rendered.status ?? "queued";
@@ -491,8 +671,12 @@ function drawNodes(
       if (nodeStyle === "box") {
         drawNodeBox(canvas, startX, rank.y, rendered, status);
       } else {
+        if (rendered.isStart) canvas.put(startX - 2, rank.y, "▶", STATUS_STYLES[status]);
         canvas.put(startX, rank.y, STATUS_GLYPHS[status], STATUS_STYLES[status]);
         canvas.text(startX + 2, rank.y, rendered.text, status === "queued" ? "dim" : "plain");
+        if (rendered.isEnd) {
+          canvas.put(startX + rendered.width + 1, rank.y, "■", STATUS_STYLES[status]);
+        }
       }
     }
   }
@@ -510,15 +694,62 @@ function drawNodeBox(
   rendered: RenderedCell,
   status: NodeStatus,
 ): void {
-  const chars = status === "active" ? BOX_CHARS.heavy : BOX_CHARS.light;
-  const style = STATUS_STYLES[status];
+  const chars =
+    status === "active" || status === "replay_focus" ? BOX_CHARS.heavy : BOX_CHARS.light;
+  const borderStyle = STATUS_STYLES[status];
+  const typeStyle = nodeTypeStyle(rendered.nodeType);
+  const contentStyle = status === "queued" ? "dim" : "plain";
   const innerWidth = rendered.width - 2;
-  canvas.text(startX, y, `${chars.tl}${chars.h.repeat(innerWidth)}${chars.tr}`, style);
-  canvas.text(startX, y + 1, chars.v, style);
-  canvas.put(startX + 2, y + 1, STATUS_GLYPHS[status], style);
-  canvas.text(startX + 4, y + 1, rendered.text, status === "queued" ? "dim" : "plain");
-  canvas.text(startX + rendered.width - 1, y + 1, chars.v, style);
-  canvas.text(startX, y + 2, `${chars.bl}${chars.h.repeat(innerWidth)}${chars.br}`, style);
+  const height = 7 + rendered.branchLines.length;
+  const rightX = startX + rendered.width - 1;
+  const horizontal = chars.h.repeat(innerWidth);
+  const rowBorder = (row: number) => {
+    canvas.text(startX, row, chars.v, borderStyle);
+    canvas.text(rightX, row, chars.v, borderStyle);
+  };
+  const pairedRow = (
+    row: number,
+    left: string,
+    leftStyle: CanvasStyle,
+    right: string,
+    rightStyle: CanvasStyle,
+  ) => {
+    rowBorder(row);
+    canvas.text(startX + 2, row, fitText(left, innerWidth - 2), leftStyle);
+    const rightText = fitText(right, innerWidth - 2);
+    canvas.text(rightX - 1 - [...rightText].length, row, rightText, rightStyle);
+  };
+
+  canvas.text(startX, y, `${chars.tl}${horizontal}${chars.tr}`, borderStyle);
+  rowBorder(y + 1);
+  canvas.text(startX + 1, y + 1, centeredText(rendered.nodeId, innerWidth), contentStyle);
+  canvas.text(startX, y + 2, `${chars.ml}${horizontal}${chars.mr}`, borderStyle);
+  pairedRow(
+    y + 3,
+    nodeTypeBadge(rendered.nodeType),
+    typeStyle,
+    `${STATUS_GLYPHS[status]} ${STATUS_LABELS[status]}`,
+    borderStyle,
+  );
+  pairedRow(y + 4, `↻ ${rendered.attempts}`, contentStyle, `◷ ${rendered.elapsed}`, contentStyle);
+  for (const [index, branch] of rendered.branchLines.entries()) {
+    const row = y + 5 + index;
+    rowBorder(row);
+    canvas.text(startX + 2, row, fitText(branch, innerWidth - 2), "branch");
+  }
+  const detailRow = y + 5 + rendered.branchLines.length;
+  rowBorder(detailRow);
+  if (rendered.detail) {
+    canvas.text(
+      startX + 2,
+      detailRow,
+      fitText(`… ${rendered.detail}`, innerWidth - 2),
+      contentStyle,
+    );
+  }
+  canvas.text(startX, y + height - 1, `${chars.bl}${horizontal}${chars.br}`, borderStyle);
+  if (rendered.isStart) canvas.put(startX - 2, y + 1, "▶", borderStyle);
+  if (rendered.isEnd) canvas.put(startX + rendered.width + 1, y + 1, "■", borderStyle);
 }
 
 function edgeStyle(
@@ -544,6 +775,7 @@ function drawSegments(
   activePair: string | null,
   graphWidth: number,
   nodeStyle: GraphNodeStyle,
+  boxHeight: number,
   lanes: BackEdgeLanes,
 ): PendingLabel[] {
   const labels: PendingLabel[] = [];
@@ -557,7 +789,7 @@ function drawSegments(
     // Forward lines start right below the source cell, cross any back-edge
     // lane rows (as ┼ crossings), run their strip tracks, then cross the
     // entry lanes to the arrow row directly above the target cell.
-    const stubTop = top.y + cellHeight(nodeStyle);
+    const stubTop = top.y + cellHeight(nodeStyle, boxHeight);
     const stripTop = stubTop + lanes.below(rank).length;
     const arrowY = bottom.y - 1;
     const stripBottom = arrowY - 1 - lanes.above(rank + 1).length;
@@ -665,6 +897,7 @@ function drawBackEdges(
   transitions: Set<string>,
   graphWidth: number,
   nodeStyle: GraphNodeStyle,
+  boxHeight: number,
   lanes: BackEdgeLanes,
 ): void {
   let gutterX = graphWidth + GUTTER_GAP;
@@ -682,14 +915,14 @@ function drawBackEdges(
       continue;
     }
     const style: CanvasStyle = transitions.has(`${edge.from}->${edge.to}`) ? "taken" : "back";
-    const exitLaneY = from.y + cellHeight(nodeStyle) + exit.lane;
+    const exitLaneY = from.y + cellHeight(nodeStyle, boxHeight) + exit.lane;
     const aboveCount = lanes.above(toRank).length;
     const arrowY = to.y - 1;
     const entryLaneY = arrowY - aboveCount + entry.lane;
 
     // Downward stub out of the source cell, then right along the exit lane.
-    if (exitLaneY > from.y + cellHeight(nodeStyle)) {
-      canvas.vline(exit.x, from.y + cellHeight(nodeStyle), exitLaneY - 1, style);
+    if (exitLaneY > from.y + cellHeight(nodeStyle, boxHeight)) {
+      canvas.vline(exit.x, from.y + cellHeight(nodeStyle, boxHeight), exitLaneY - 1, style);
     }
     canvas.put(exit.x, exitLaneY, "└", style);
     canvas.hline(exitLaneY, exit.x + 1, gutterX - 1, style);

package/src/viewer/render.ts

@@ -1,11 +1,28 @@
 import { ansi, fitWidth, sanitizeText } from "../render/ansi.js";
 import { formatDuration, runElapsedMs } from "../render/format.js";
 import { renderGraphLines } from "../render/graph-render.js";
+import { decodeValueWith } from "../workflows/artifacts.js";
 import type { LoadedRunBundle } from "../workflows/store.js";
 import type { WorkflowRunStatus, WorkflowStepRecord } from "../workflows/types.js";
 
 export { formatDuration, runElapsedMs };
 
+/**
+ * Replace `$artifact` references with a compact placeholder for display. The
+ * terminal viewer shows summaries; full artifact contents are for replay
+ * tooling.
+ */
+function withArtifactPlaceholders(value: unknown): unknown {
+  return decodeValueWith(value, (ref) => `«artifact ${formatBytes(ref.bytes)} ${ref.path}»`);
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  }
+  return `${(bytes / 1024).toFixed(1)}KB`;
+}
+
 export type ViewportSize = {
   width: number;
   height: number;
@@ -24,10 +41,11 @@ export function statusLabel(status: WorkflowRunStatus): string {
   return STATUS_COLORS[status](status);
 }
 
-function previewValue(value: unknown, maxLength: number): string {
-  if (value === undefined) {
+function previewValue(rawValue: unknown, maxLength: number): string {
+  if (rawValue === undefined) {
     return "";
   }
+  const value = withArtifactPlaceholders(rawValue);
   const text = typeof value === "string" ? value : JSON.stringify(value);
   // Model-controlled values must not carry escape sequences into the terminal.
   const singleLine = sanitizeText(text ?? "")
@@ -120,7 +138,7 @@ function nodeStatusLine(bundle: LoadedRunBundle, nodeId: string, width: number,
 /** Pretty-printed JSON body of the selected step for the inspector pane. */
 function inspectorLines(step: WorkflowStepRecord, width: number): string[] {
   const lines: string[] = [];
-  const body = step.error !== undefined ? step.error : step.output;
+  const body = step.error !== undefined ? step.error : withArtifactPlaceholders(step.output);
   const rendered =
     typeof body === "string" && step.error !== undefined ? body : JSON.stringify(body, null, 2);
   for (const raw of (rendered ?? "null").split("\n")) {