@davidorex/pi-workflows 0.1.0

package/src/tui.test.ts

@@ -0,0 +1,355 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { TUI } from "@mariozechner/pi-tui";
+import { createProgressWidget, type ProgressWidgetState } from "./tui.ts";
+import type { WorkflowSpec, StepUsage } from "./types.ts";
+
+/**
+ * Minimal Theme mock — passes through text unchanged so we can assert on content
+ * without dealing with ANSI codes. Mocks exactly the methods tui.ts calls.
+ */
+function mockTheme(): Theme {
+  return {
+    bold: (s: string) => s,
+    fg: (_color: string, s: string) => s,
+    dim: (s: string) => s,
+  } as unknown as Theme;
+}
+
+/**
+ * Minimal TUI mock — just needs requestRender().
+ */
+function mockTUI(): TUI {
+  return {
+    requestRender: () => {},
+  } as unknown as TUI;
+}
+
+function zeroUsage(): StepUsage {
+  return { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0, turns: 0 };
+}
+
+function makeWidgetState(overrides: Partial<ProgressWidgetState> = {}): ProgressWidgetState {
+  const spec: WorkflowSpec = {
+    name: "test-workflow",
+    description: "test",
+    steps: {
+      explore: { agent: "explorer" },
+      analyze: { agent: "analyzer" },
+      report: { agent: "reporter" },
+    },
+    source: "project",
+    filePath: "/test.yaml",
+  };
+
+  return {
+    spec,
+    state: { input: {}, steps: {}, status: "running" },
+    startTime: Date.now(),
+    ...overrides,
+  };
+}
+
+describe("createProgressWidget", () => {
+  it("returns a factory function", () => {
+    const factory = createProgressWidget(makeWidgetState());
+    assert.strictEqual(typeof factory, "function");
+  });
+
+  it("factory creates a component with render and dispose", () => {
+    const factory = createProgressWidget(makeWidgetState());
+    const component = factory(mockTUI(), mockTheme());
+    assert.strictEqual(typeof component.render, "function");
+    assert.strictEqual(typeof component.dispose, "function");
+    component.dispose!();
+  });
+
+  it("renders header with workflow name and step count", () => {
+    const widgetState = makeWidgetState({ currentStep: "explore" });
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    assert.ok(lines[0].includes("test-workflow"), "header should include workflow name");
+    assert.ok(lines[0].includes("1/3"), "header should show step 1/3");
+  });
+
+  it("renders pending steps with dot indicator", () => {
+    const widgetState = makeWidgetState();
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    assert.ok(lines.some(l => l.includes("·") && l.includes("explore")));
+    assert.ok(lines.some(l => l.includes("·") && l.includes("analyze")));
+    assert.ok(lines.some(l => l.includes("·") && l.includes("report")));
+  });
+
+  it("renders running step with triangle indicator", () => {
+    const widgetState = makeWidgetState({ currentStep: "analyze" });
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    assert.ok(lines.some(l => l.includes("▸") && l.includes("analyze")));
+  });
+
+  it("renders completed step with checkmark, duration, cost, tokens", () => {
+    const widgetState = makeWidgetState({ currentStep: "analyze" });
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "explorer",
+      status: "completed",
+      usage: { input: 5000, output: 2000, cacheRead: 0, cacheWrite: 0, cost: 0.03, turns: 1 },
+      durationMs: 42000,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine, "should have explore line");
+    assert.ok(exploreLine.includes("✓"), "completed should have checkmark");
+    assert.ok(exploreLine.includes("42s"), "should show duration");
+    assert.ok(exploreLine.includes("$0.03"), "should show cost");
+    assert.ok(exploreLine.includes("7.0k tok"), "should show token count");
+  });
+
+  it("renders failed step with X indicator and error", () => {
+    const widgetState = makeWidgetState();
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "explorer",
+      status: "failed",
+      usage: zeroUsage(),
+      durationMs: 5000,
+      error: "Agent crashed",
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine, "should have explore line");
+    assert.ok(exploreLine.includes("✗"), "failed should have X");
+    assert.ok(exploreLine.includes("Agent crashed"), "should show error");
+  });
+
+  it("renders skipped step with circle indicator", () => {
+    const widgetState = makeWidgetState();
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "skipped",
+      status: "skipped",
+      usage: zeroUsage(),
+      durationMs: 0,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine, "should have explore line");
+    assert.ok(exploreLine.includes("⊘"), "skipped should have ⊘");
+    assert.ok(exploreLine.includes("[skipped]"), "should show [skipped] tag");
+  });
+
+  it("renders gate step with [gate] tag", () => {
+    const widgetState = makeWidgetState();
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "gate",
+      status: "completed",
+      output: { passed: true, exitCode: 0, output: "ok" },
+      usage: zeroUsage(),
+      durationMs: 100,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine?.includes("[gate]"), "gate step should show [gate] tag");
+  });
+
+  it("renders transform step with [transform] tag", () => {
+    const widgetState = makeWidgetState();
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "transform",
+      status: "completed",
+      output: { merged: true },
+      usage: zeroUsage(),
+      durationMs: 1,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine?.includes("[transform]"), "transform step should show [transform] tag");
+  });
+
+  it("shows parallel count in header for multiple concurrent steps", () => {
+    const widgetState = makeWidgetState({ currentStep: "explore, analyze" });
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    assert.ok(lines[0].includes("[2 parallel]"), "header should show parallel count");
+  });
+
+  it("shows multiple running indicators for parallel steps", () => {
+    const widgetState = makeWidgetState({ currentStep: "explore, analyze" });
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const runningLines = lines.filter(l => l.includes("▸"));
+    assert.strictEqual(runningLines.length, 2, "should have 2 running step indicators");
+  });
+
+  it("renders correct number of lines (header + one per step)", () => {
+    const widgetState = makeWidgetState();
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    // 1 header + 3 steps = 4 lines
+    assert.strictEqual(lines.length, 4);
+  });
+
+  it("truncates lines to width", () => {
+    const widgetState = makeWidgetState({ currentStep: "explore" });
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(20);
+    component.dispose!();
+
+    for (const line of lines) {
+      assert.ok(line.length <= 20, `line exceeds width: "${line}" (${line.length})`);
+    }
+  });
+
+  it("renders resumed indicator when resumedSteps is set", () => {
+    const widgetState = makeWidgetState({ resumedSteps: 3, currentStep: "report" });
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "explorer",
+      status: "completed",
+      usage: zeroUsage(),
+      durationMs: 10000,
+    };
+    widgetState.state.steps.analyze = {
+      step: "analyze",
+      agent: "analyzer",
+      status: "completed",
+      usage: zeroUsage(),
+      durationMs: 20000,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const resumedLine = lines.find(l => l.includes("Resumed"));
+    assert.ok(resumedLine, "should have a resumed indicator line");
+    assert.ok(resumedLine.includes("↻"), "should have ↻ symbol");
+    assert.ok(resumedLine.includes("3 steps from prior run"), "should show step count");
+    // Header + resumed line + 3 steps = 5 lines
+    assert.strictEqual(lines.length, 5);
+  });
+
+  it("renders paused indicator when state status is paused", () => {
+    const widgetState = makeWidgetState();
+    widgetState.state.status = "paused";
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "explorer",
+      status: "completed",
+      usage: zeroUsage(),
+      durationMs: 10000,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const pausedLine = lines.find(l => l.includes("Paused"));
+    assert.ok(pausedLine, "should have a paused indicator line");
+    assert.ok(pausedLine.includes("⏸"), "should have ⏸ symbol");
+  });
+
+  it("does not render resumed indicator when resumedSteps is not set", () => {
+    const widgetState = makeWidgetState();
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    assert.ok(!lines.some(l => l.includes("Resumed")), "should not have resumed indicator");
+  });
+
+  it("shows [truncated] indicator for truncated step", () => {
+    const widgetState = makeWidgetState({ currentStep: "analyze" });
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "explorer",
+      status: "completed",
+      usage: { input: 1000, output: 500, cacheRead: 0, cacheWrite: 0, cost: 0.01, turns: 1 },
+      durationMs: 5000,
+      truncated: true,
+      warnings: ["Stdout exceeded 10MB limit"],
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    // Find the explore line and verify it contains a truncated indicator
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine, "explore line should exist");
+    assert.ok(exploreLine.includes("truncated"), "Truncated step should show [truncated] indicator");
+  });
+
+  it("does not show [truncated] indicator for non-truncated step", () => {
+    const widgetState = makeWidgetState({ currentStep: "analyze" });
+    widgetState.state.steps.explore = {
+      step: "explore",
+      agent: "explorer",
+      status: "completed",
+      usage: { input: 1000, output: 500, cacheRead: 0, cacheWrite: 0, cost: 0.01, turns: 1 },
+      durationMs: 5000,
+    };
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+    const lines = component.render(120);
+    component.dispose!();
+
+    const exploreLine = lines.find(l => l.includes("explore"));
+    assert.ok(exploreLine, "explore line should exist");
+    assert.ok(!exploreLine.includes("truncated"), "Non-truncated step should not show [truncated]");
+  });
+
+  it("dispose clears the pulse interval", () => {
+    const widgetState = makeWidgetState();
+    const factory = createProgressWidget(widgetState);
+    const component = factory(mockTUI(), mockTheme());
+
+    // Should not throw; if dispose didn't clear the interval,
+    // the test process would hang (node:test waits for timers to drain)
+    component.dispose!();
+  });
+});

package/src/tui.ts

@@ -0,0 +1,182 @@
+/**
+ * TUI progress widget for workflow execution.
+ * Shows step status, timing, cost, and parallel execution indicators.
+ */
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { TUI, Component } from "@mariozechner/pi-tui";
+import type { WorkflowSpec, ExecutionState, StepResult } from "./types.ts";
+import { formatDuration, formatCost, formatTokens } from "./format.ts";
+
+export interface StepActivity {
+  tool: string;      // "read", "edit", "bash", etc.
+  preview: string;   // "src/index.ts", "npm test", etc.
+  timestamp: number;
+}
+
+export interface StepOutputSummary {
+  tasks?: Array<{ name: string; status: string; files?: string[] }>;
+  testCount?: number;
+  note?: string;
+}
+
+export interface ProgressWidgetState {
+  spec: WorkflowSpec;
+  state: ExecutionState;
+  currentStep?: string;          // name of the currently running step (comma-separated for parallel)
+  startTime: number;             // Date.now() when workflow started
+  parallelSubSteps?: Record<string, import("./types.ts").StepResult>;  // live sub-step results for parallel step
+  resumedSteps?: number;         // number of steps carried from a prior run (resume indicator)
+  activities: Map<string, StepActivity[]>;  // stepName → recent tool calls (ring buffer, last 5)
+  outputSummaries: Map<string, StepOutputSummary>; // stepName → parsed output after completion
+}
+
+/**
+ * Create a widget factory for ctx.ui.setWidget().
+ * Returns a function that pi calls to get the component.
+ *
+ * The returned component renders a compact progress view:
+ *   ─────────────────────────────────────
+ *   ● bugfix  step 2/3              1m32s
+ *     ✓ diagnose     42s   $0.03  12k tok
+ *     ▸ fix           50s   8k tok...
+ *     · verify
+ *   ─────────────────────────────────────
+ */
+export function createProgressWidget(
+  widgetState: ProgressWidgetState,
+): (tui: TUI, theme: Theme) => Component & { dispose?(): void } {
+  return (tui: TUI, theme: Theme) => {
+    /** Pulse interval (ms) for the elapsed-time ticker. Balances update frequency vs overhead. */
+    const PULSE_INTERVAL_MS = 800;
+    let pulseOn = true;
+    const interval = setInterval(() => {
+      pulseOn = !pulseOn;
+      tui.requestRender();
+    }, PULSE_INTERVAL_MS);
+
+    return {
+      render(width: number): string[] {
+        const lines: string[] = [];
+        const stepNames = Object.keys(widgetState.spec.steps);
+        const totalSteps = stepNames.length;
+
+        // Parse current steps (may be comma-separated for parallel)
+        const currentSteps = widgetState.currentStep?.split(", ") ?? [];
+        const parallelCount = currentSteps.length;
+
+        // Determine current step number
+        let currentStepNum = 0;
+        if (currentSteps.length > 0 && currentSteps[0]) {
+          const idx = stepNames.indexOf(currentSteps[0]);
+          currentStepNum = idx >= 0 ? idx + 1 : 0;
+        } else {
+          // Count completed steps
+          currentStepNum = Object.values(widgetState.state.steps).filter(
+            (s) => s.status === "completed",
+          ).length;
+        }
+
+        const elapsed = formatDuration(Date.now() - widgetState.startTime);
+        const workflowName = theme.bold(widgetState.spec.name);
+        const indicator = pulseOn
+          ? theme.fg("accent", "\u25cf")
+          : theme.fg("dim", "\u25cf");
+
+        const parallelTag = parallelCount > 1 ? ` [${parallelCount} parallel]` : "";
+        const headerLine = `${indicator} ${workflowName}  step ${currentStepNum}/${totalSteps}${parallelTag}  ${theme.fg("dim", elapsed)}`;
+        lines.push(headerLine.length > width ? headerLine.slice(0, width) : headerLine);
+
+        // Resumed indicator
+        if (widgetState.resumedSteps) {
+          const resumedLine = `  ${theme.fg("dim", "\u21bb")} Resumed: ${widgetState.resumedSteps} steps from prior run`;
+          lines.push(resumedLine.length > width ? resumedLine.slice(0, width) : resumedLine);
+        }
+
+        // Paused indicator
+        if (widgetState.state.status === "paused") {
+          const pausedLine = `  ${theme.fg("accent", "\u23f8")} Paused`;
+          lines.push(pausedLine.length > width ? pausedLine.slice(0, width) : pausedLine);
+        }
+
+        // Step lines
+        for (const stepName of stepNames) {
+          const stepResult: StepResult | undefined = widgetState.state.steps[stepName];
+          let line: string;
+
+          if (stepResult && stepResult.status === "skipped") {
+            // Skipped step: ⊘ stepName [skipped]
+            line = `  ${theme.fg("dim", "\u2298")} ${stepName} ${theme.fg("dim", "[skipped]")}`;
+          } else if (stepResult && stepResult.status === "completed") {
+            const dur = formatDuration(stepResult.durationMs);
+            const cost = formatCost(stepResult.usage.cost);
+            const tok = formatTokens(stepResult.usage.input + stepResult.usage.output);
+            // Show step type indicator for gate/transform
+            const typeTag = stepResult.agent === "gate" ? " [gate]" : stepResult.agent === "transform" ? " [transform]" : "";
+            const truncTag = stepResult.truncated ? ` ${theme.fg("warning", "[truncated]")}` : "";
+            line = `  ${theme.fg("success", "\u2713")} ${stepName}${typeTag}  ${theme.fg("dim", dur)}  ${theme.fg("dim", cost)}  ${theme.fg("dim", tok)}${truncTag}`;
+            lines.push(line.length > width ? line.slice(0, width) : line);
+
+            // Render output summary sub-lines (capped at 3)
+            const summary = widgetState.outputSummaries?.get(stepName);
+            if (summary) {
+              let summaryLines = 0;
+              const MAX_SUMMARY_LINES = 3;
+              if (summary.tasks) {
+                for (const task of summary.tasks) {
+                  if (summaryLines >= MAX_SUMMARY_LINES) break;
+                  const files = task.files?.join(", ") || "";
+                  const statusIcon = task.status === "done" ? "\u2713" : task.status === "failed" ? "\u2717" : "\u00b7";
+                  const taskLine = `      ${theme.fg("dim", statusIcon)} ${theme.fg("dim", task.name)}${files ? "  " + theme.fg("dim", files) : ""}`;
+                  lines.push(taskLine.length > width ? taskLine.slice(0, width) : taskLine);
+                  summaryLines++;
+                }
+              }
+              if (summary.testCount && summaryLines < MAX_SUMMARY_LINES) {
+                const testLine = `      ${theme.fg("dim", `${summary.testCount} tests pass`)}`;
+                lines.push(testLine.length > width ? testLine.slice(0, width) : testLine);
+                summaryLines++;
+              }
+              if (summary.note && summaryLines < MAX_SUMMARY_LINES) {
+                const noteLine = `      ${theme.fg("dim", summary.note)}`;
+                lines.push(noteLine.length > width ? noteLine.slice(0, width) : noteLine);
+              }
+            }
+            continue;  // skip the push below, already pushed
+          } else if (stepResult && stepResult.status === "failed") {
+            const dur = formatDuration(stepResult.durationMs);
+            const errorPreview = stepResult.error || "Unknown error";
+            line = `  ${theme.fg("error", "\u2717")} ${stepName}  ${theme.fg("dim", dur)}  ${errorPreview}`;
+          } else if (stepResult && stepResult.agent === "parallel") {
+            // Completed parallel step — show with sub-step count
+            const dur = formatDuration(stepResult.durationMs);
+            const cost = formatCost(stepResult.usage.cost);
+            const tok = formatTokens(stepResult.usage.input + stepResult.usage.output);
+            line = `  ${theme.fg("success", "\u2713")} ${stepName} [parallel]  ${theme.fg("dim", dur)}  ${theme.fg("dim", cost)}  ${theme.fg("dim", tok)}`;
+          } else if (currentSteps.includes(stepName)) {
+            const stepElapsed = formatDuration(Date.now() - widgetState.startTime);
+            line = `  ${theme.fg("accent", "\u25b8")} ${theme.fg("accent", stepName)}  ${theme.fg("dim", stepElapsed + "...")}`;
+            lines.push(line.length > width ? line.slice(0, width) : line);
+
+            // Render most recent tool activity under running step
+            const activities = widgetState.activities?.get(stepName);
+            if (activities && activities.length > 0) {
+              const latest = activities[activities.length - 1];
+              const actLine = `      ${theme.fg("dim", latest.tool)} ${theme.fg("dim", latest.preview)}`;
+              lines.push(actLine.length > width ? actLine.slice(0, width) : actLine);
+            }
+            continue;  // skip the push below, already pushed
+          } else {
+            line = `  ${theme.fg("dim", "\u00b7")} ${stepName}`;
+          }
+
+          lines.push(line.length > width ? line.slice(0, width) : line);
+        }
+
+        return lines;
+      },
+      dispose() {
+        clearInterval(interval);
+      },
+    };
+  };
+}