pi-workflow-engine 0.11.0 → 0.12.0

package/.pi/extensions/pi-workflow-engine/src/ui/workflow-format.ts

@@ -1,7 +1,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth } from "@earendil-works/pi-tui";
-import type { AgentRowSnapshot, WorkflowProgressSnapshot } from "../progress.ts";
-import type { WorkflowLaneItemStatus } from "../types.ts";
+import type { AgentRowSnapshot, WorkflowLaneItemStatus, WorkflowProgressSnapshot } from "../progress-types.ts";
+import { formatWorkflowUsageLine } from "../usage.ts";
 
 export type WorkflowDisplayStatus = WorkflowLaneItemStatus | "queued" | "done" | "failed";
 export type WorkflowThemeColor = Parameters<Theme["fg"]>[0];
@@ -49,10 +49,6 @@ export function statusIcon(status: WorkflowDisplayStatus, theme: Theme): string
   }
 }
 
-export function badge(label: string, color: WorkflowThemeColor, theme: Theme): string {
-  return theme.fg(color, `[${label}]`);
-}
-
 export function truncateDisplay(text: string, width: number): string {
   if (width <= 0) return "";
   return truncateToWidth(text, width);
@@ -97,6 +93,30 @@ export interface WorkflowStatusSource {
   readonly counters: readonly { readonly key: string; readonly label: string; readonly value: number }[];
 }
 
+interface WorkflowInspectionSource {
+  readonly name: string;
+  readonly snapshot: WorkflowProgressSnapshot | (() => WorkflowProgressSnapshot);
+}
+
+export function workflowInspectionSnapshot(inspection: WorkflowInspectionSource): WorkflowProgressSnapshot {
+  return typeof inspection.snapshot === "function" ? inspection.snapshot() : inspection.snapshot;
+}
+
+export function formatWorkflowInspection(inspection: WorkflowInspectionSource): string {
+  const snapshot = workflowInspectionSnapshot(inspection);
+  const counts = countSnapshotAgents(snapshot);
+  const lines = [
+    `Workflow inspector: ${inspection.name}`,
+    `Run: ${snapshot.runId}`,
+    `Phase: ${snapshot.currentPhase}`,
+    `Agents: ${counts.running} running, ${counts.queued} queued, ${counts.done} done, ${counts.failed} failed`,
+  ];
+  const usage = formatWorkflowUsageLine(snapshot.usage);
+  if (usage) lines.push(usage);
+  if (snapshot.logs.length > 0) lines.push("Recent log:", ...snapshot.logs.slice(-8).map((entry) => `- ${entry}`));
+  return lines.join("\n");
+}
+
 export function statusText(snapshot: WorkflowProgressSnapshot, theme: Theme): string | undefined {
   const counts = countSnapshotAgents(snapshot);
   return statusTextFromCounts(snapshot, counts, theme);

package/.pi/extensions/pi-workflow-engine/src/ui/workflow-inspector.ts

@@ -1,9 +1,16 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { matchesKey, type TUI, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import type { AgentRowSnapshot, WorkflowLaneItemSnapshot, WorkflowProgressSnapshot } from "../progress.ts";
+import type { AgentRowSnapshot, WorkflowLaneItemSnapshot, WorkflowProgressSnapshot } from "../progress-types.ts";
+import { formatWorkflowUsageLine } from "../usage.ts";
 import { agentDetailParts, formatCount, formatDuration, statusIcon, truncateDisplay } from "./workflow-format.ts";
+import {
+  centerWorkflowViewerViewport,
+  fitWorkflowViewerRow,
+  fitWorkflowViewerRows,
+  workflowViewerHeight,
+} from "./workflow-viewer-layout.ts";
 
-type Section = "Overview" | "Agents" | "Findings" | "Logs";
+type Section = "Overview" | "Agents" | "Findings" | "Logs" | "Result";
 
 interface InspectorLine {
   text: string;
@@ -11,11 +18,20 @@ interface InspectorLine {
   key?: string;
 }
 
-const SECTIONS: readonly Section[] = ["Overview", "Agents", "Findings", "Logs"];
+const BASE_SECTIONS: readonly Section[] = ["Overview", "Agents", "Findings", "Logs"];
+const RESULT_SECTIONS: readonly Section[] = [...BASE_SECTIONS, "Result"];
+const MAX_RESULT_SOURCE_LINES = 200;
+const MAX_RESULT_RENDERED_LINES = 400;
+
+export interface WorkflowInspectorOutcome {
+  readonly label: string;
+  readonly text: string;
+}
 
 export class WorkflowInspector {
   private sectionIndex = 0;
-  private readonly selected: Record<Section, number> = { Overview: 0, Agents: 0, Findings: 0, Logs: 0 };
+  private contentWidth = 80;
+  private readonly selected: Record<Section, number> = { Overview: 0, Agents: 0, Findings: 0, Logs: 0, Result: 0 };
   private readonly expanded = new Set<string>();
 
   constructor(
@@ -23,6 +39,7 @@ export class WorkflowInspector {
     private readonly tui: Pick<TUI, "requestRender" | "terminal">,
     private readonly theme: Theme,
     private readonly close: () => void,
+    private readonly outcome?: WorkflowInspectorOutcome,
   ) {}
 
   handleInput(data: string): void {
@@ -32,7 +49,7 @@ export class WorkflowInspector {
     }
 
     if (matchesKey(data, "tab")) {
-      this.sectionIndex = (this.sectionIndex + 1) % SECTIONS.length;
+      this.sectionIndex = (this.sectionIndex + 1) % this.sections().length;
       this.requestRender();
       return;
     }
@@ -60,47 +77,52 @@ export class WorkflowInspector {
   }
 
   render(width: number): string[] {
-    const w = Math.max(24, width);
+    const w = Math.max(4, width);
     const inner = Math.max(1, w - 4);
+    this.contentWidth = inner;
     const th = this.theme;
     const snapshot = this.snapshotProvider();
-    const body = this.sectionLines(this.currentSection(), snapshot, inner);
-    const maxBody = Math.max(6, Math.floor(this.tui.terminal.rows * 0.8) - 6);
-    const selectedLine = this.selectedLineIndex(body);
-    const maxStart = Math.max(0, body.length - maxBody);
-    const start = Math.min(maxStart, Math.max(0, selectedLine - Math.floor(maxBody / 2)));
-    const visible = body.slice(start, start + maxBody);
-    const lines: string[] = [];
-
-    lines.push(th.fg("border", `╭${"─".repeat(w - 2)}╮`));
-    lines.push(this.row(` ${th.fg("accent", th.bold("Workflow Inspector"))} ${th.fg("dim", snapshot.title)}`, inner));
-    lines.push(this.row(` ${this.tabs()}`, inner));
-    lines.push(this.row(th.fg("dim", "─".repeat(inner)), inner));
-
-    for (const line of visible) lines.push(this.row(line.text, inner));
-    while (visible.length < maxBody) {
-      visible.push({ text: "" });
-      lines.push(this.row("", inner));
+    const section = this.currentSection();
+    let body = this.sectionLines(section, snapshot, inner);
+    const selectableCount = body.filter((line) => line.selectable).length;
+    const clampedSelection = Math.min(Math.max(0, selectableCount - 1), this.selected[section]);
+    if (clampedSelection !== this.selected[section]) {
+      this.selected[section] = clampedSelection;
+      body = this.sectionLines(section, snapshot, inner);
     }
-
-    lines.push(this.row(th.fg("dim", "─".repeat(inner)), inner));
-    const pct = body.length <= maxBody ? "100%" : `${Math.round(((start + visible.length) / body.length) * 100)}%`;
-    const selected = this.selected[this.currentSection()] + 1;
-    const count = Math.max(1, this.itemCount(this.currentSection()));
-    lines.push(
-      this.row(
+    const innerHeight = Math.max(1, workflowViewerHeight(this.tui.terminal.rows) - 2);
+    const maxBody = Math.max(1, innerHeight - 5);
+    const viewport = centerWorkflowViewerViewport(body, maxBody, this.selectedLineIndex(body));
+    const pct = `${viewport.percentage}%`;
+    const selected = this.selected[section] + 1;
+    const count = Math.max(1, selectableCount);
+    const content = fitWorkflowViewerRows(viewport.visible.map((line) => line.text), maxBody);
+    const interior = fitWorkflowViewerRows(
+      [
+        ` ${th.fg("accent", th.bold("Workflow Inspector"))} ${th.fg("dim", snapshot.title)}`,
+        ` ${this.tabs()}`,
+        th.fg("dim", "─".repeat(inner)),
+        ...content,
+        th.fg("dim", "─".repeat(inner)),
         `${th.fg("dim", `${body.length} lines · ${pct} · ${selected}/${count}`)} ${th.fg("dim", "· tab sections · ↑↓ select · enter expand/collapse · q/esc close")}`,
-        inner,
-      ),
+      ],
+      innerHeight,
     );
-    lines.push(th.fg("border", `╰${"─".repeat(w - 2)}╯`));
-    return lines.map((line) => truncateDisplay(line, w));
+    return [
+      th.fg("border", `╭${"─".repeat(Math.max(0, w - 2))}╮`),
+      ...interior.map((line) => this.row(line, inner)),
+      th.fg("border", `╰${"─".repeat(Math.max(0, w - 2))}╯`),
+    ].map((line) => truncateDisplay(line, w));
   }
 
   invalidate(): void {}
 
   private currentSection(): Section {
-    return SECTIONS[this.sectionIndex] ?? "Overview";
+    return this.sections()[this.sectionIndex] ?? "Overview";
+  }
+
+  private sections(): readonly Section[] {
+    return this.outcome ? RESULT_SECTIONS : BASE_SECTIONS;
   }
 
   private requestRender(): void {
@@ -108,24 +130,23 @@ export class WorkflowInspector {
   }
 
   private tabs(): string {
-    return SECTIONS.map((section, index) => {
-      const label = index === this.sectionIndex ? this.theme.fg("accent", this.theme.bold(section)) : this.theme.fg("muted", section);
-      return label;
+    return this.sections().map((section, index) => {
+      return index === this.sectionIndex ? this.theme.fg("accent", this.theme.bold(section)) : this.theme.fg("muted", section);
     }).join(this.theme.fg("dim", "  |  "));
   }
 
   private row(content: string, innerWidth: number): string {
-    const padded = padRight(truncateDisplay(content, innerWidth), innerWidth);
-    return this.theme.fg("border", "│") + " " + padded + " " + this.theme.fg("border", "│");
+    const fitted = fitWorkflowViewerRow(content, innerWidth);
+    return this.theme.fg("border", "│") + " " + fitted + " " + this.theme.fg("border", "│");
   }
 
   private itemCount(section: Section): number {
-    return this.sectionLines(section, this.snapshotProvider(), 80).filter((line) => line.selectable).length;
+    return this.sectionLines(section, this.snapshotProvider(), this.contentWidth).filter((line) => line.selectable).length;
   }
 
   private selectedKey(section: Section): string | undefined {
     let index = -1;
-    for (const line of this.sectionLines(section, this.snapshotProvider(), 80)) {
+    for (const line of this.sectionLines(section, this.snapshotProvider(), this.contentWidth)) {
       if (!line.selectable) continue;
       index++;
       if (index === this.selected[section]) return line.key;
@@ -153,6 +174,8 @@ export class WorkflowInspector {
         return this.findingLines(snapshot, width);
       case "Logs":
         return this.logLines(snapshot);
+      case "Result":
+        return this.resultLines(width);
     }
   }
 
@@ -162,6 +185,8 @@ export class WorkflowInspector {
       { text: `${this.theme.fg("muted", "Phase")} ${this.theme.fg("accent", snapshot.currentPhase)}`, selectable: true, key: "overview:phase" },
       { text: `${this.theme.fg("muted", "Elapsed")} ${elapsed}`, selectable: true, key: "overview:elapsed" },
     ];
+    const usage = formatWorkflowUsageLine(snapshot.usage);
+    if (usage) lines.push({ text: usage, selectable: true, key: "overview:usage" });
     if (snapshot.counters.length > 0) {
       lines.push({ text: this.theme.fg("dim", "Counters") });
       for (const counter of snapshot.counters) {
@@ -260,9 +285,26 @@ export class WorkflowInspector {
       return { text, selectable: true, key };
     });
   }
-}
 
-function padRight(text: string, width: number): string {
-  const visible = visibleWidth(text);
-  return text + " ".repeat(Math.max(0, width - visible));
+  private resultLines(width: number): InspectorLine[] {
+    if (!this.outcome) return [{ text: this.theme.fg("dim", "No retained outcome is available for this run.") }];
+    const source = this.outcome.text.split("\n");
+    const lines: InspectorLine[] = [{ text: this.theme.fg("dim", this.outcome.label) }];
+    const shown = source.slice(0, MAX_RESULT_SOURCE_LINES);
+    for (const sourceLine of shown) {
+      const wrapped = wrapTextWithAnsi(sourceLine || " ", Math.max(10, width - 2));
+      for (const line of wrapped) {
+        if (lines.length >= MAX_RESULT_RENDERED_LINES) break;
+        const index = lines.length;
+        const selected = this.currentSection() === "Result" && this.selected.Result === index - 1;
+        const text = selected ? this.theme.bg("selectedBg", line) : line;
+        lines.push({ text, selectable: true, key: `result:${index}` });
+      }
+      if (lines.length >= MAX_RESULT_RENDERED_LINES) break;
+    }
+    if (shown.length < source.length || lines.length >= MAX_RESULT_RENDERED_LINES) {
+      lines.push({ text: this.theme.fg("dim", "… retained result truncated for display") });
+    }
+    return lines;
+  }
 }

package/.pi/extensions/pi-workflow-engine/src/ui/workflow-result-renderer.ts

@@ -6,6 +6,7 @@ import { toReviewIssues } from "../review/review-issues.ts";
 import { formatCount } from "./workflow-format.ts";
 import { formatWorkflowUsageLine } from "../usage.ts";
 import type { WorkflowPerfDetails, WorkflowResultEnvelope } from "../workflow-execution.ts";
+import { unknownErrorMessage } from "../unknown-error.ts";
 
 export function isWorkflowResult(value: unknown): value is WorkflowResultEnvelope {
   if (!isRecord(value)) return false;
@@ -158,7 +159,7 @@ function safeJson(value: unknown): string {
   try {
     return JSON.stringify(value, null, 2) ?? String(value);
   } catch (error) {
-    return error instanceof Error ? error.message : String(error);
+    return unknownErrorMessage(error);
   }
 }
 

package/.pi/extensions/pi-workflow-engine/src/ui/workflow-viewer-layout.ts

@@ -0,0 +1,51 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+
+const VIEWPORT_HEIGHT_RATIO = 0.8;
+const VIEWPORT_MARGIN_ROWS = 2;
+
+export const WORKFLOW_VIEWER_OVERLAY_OPTIONS = {
+  overlay: true,
+  overlayOptions: {
+    anchor: "center",
+    width: "80%",
+    minWidth: 40,
+    maxHeight: "80%",
+    margin: 1,
+  },
+} as const;
+
+export function workflowViewerHeight(terminalRows: number): number {
+  const rows = Math.max(1, terminalRows);
+  const availableRows = Math.max(1, rows - VIEWPORT_MARGIN_ROWS);
+  const proportionalRows = Math.floor(rows * VIEWPORT_HEIGHT_RATIO);
+  return Math.min(availableRows, Math.max(3, proportionalRows));
+}
+
+export function fitWorkflowViewerRow(text: string, width: number): string {
+  return truncateToWidth(text, Math.max(0, width), "...", true);
+}
+
+export function fitWorkflowViewerRows(lines: readonly string[], height: number): string[] {
+  const visible = lines.slice(0, Math.max(0, height));
+  return [...visible, ...Array.from({ length: Math.max(0, height - visible.length) }, () => "")];
+}
+
+interface WorkflowViewerViewport<T> {
+  readonly visible: readonly T[];
+  readonly percentage: number;
+}
+
+export function centerWorkflowViewerViewport<T>(
+  rows: readonly T[],
+  height: number,
+  selectedIndex: number,
+): WorkflowViewerViewport<T> {
+  const visibleHeight = Math.max(0, Math.floor(height));
+  const clampedSelection = Math.min(Math.max(0, rows.length - 1), Math.max(0, selectedIndex));
+  const maxStart = Math.max(0, rows.length - visibleHeight);
+  const start = Math.min(maxStart, Math.max(0, clampedSelection - Math.floor(visibleHeight / 2)));
+  const visible = rows.slice(start, start + visibleHeight);
+  const end = Math.min(rows.length, start + visible.length);
+  const percentage = rows.length <= visibleHeight ? 100 : Math.round((end / rows.length) * 100);
+  return { visible, percentage };
+}

package/.pi/extensions/pi-workflow-engine/src/ui/workflow-widget.ts

@@ -1,31 +1,18 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { AgentRowSnapshot, PhaseSnapshot, WorkflowProgressSnapshot } from "../progress.ts";
-import { agentDetailParts, agentLabelColor, formatCount, formatDuration, statusIcon, truncateDisplay } from "./workflow-format.ts";
+import type { AgentRowSnapshot, PhaseSnapshot, WorkflowProgressSnapshot } from "../progress-types.ts";
+import { formatWorkflowUsageLine } from "../usage.ts";
+import { agentDetailParts, agentLabelColor, formatCount, formatDuration, statusIcon } from "./workflow-format.ts";
 
-const MAX_WIDGET_LINES = 12;
-const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-
-export interface WorkflowWidget {
-  nextFrame(): void;
-  render(width: number, theme: Theme): string[];
-  invalidate(): void;
-}
-
-export function createWorkflowWidget(snapshotProvider: () => WorkflowProgressSnapshot): WorkflowWidget {
-  return new LiveWorkflowWidget(snapshotProvider);
-}
+const MAX_WIDGET_LINES = 10;
 
 export function renderWorkflowWidgetLines(
   snapshot: WorkflowProgressSnapshot,
-  frame: number,
-  width: number,
   theme: Theme,
 ): string[] {
-  const safeWidth = Math.max(1, width);
   const counts = countAgents(snapshot.phases);
   const active = counts.running + counts.queued;
   const elapsed = formatDuration((snapshot.doneAt ?? Date.now()) - snapshot.startedAt);
-  const spinner = active > 0 ? theme.fg("accent", SPINNER[frame % SPINNER.length]) : theme.fg("success", "✓");
+  const activity = active > 0 ? theme.fg("accent", "●") : theme.fg("success", "✓");
 
   const headingParts = [`${counts.done}/${counts.total} done`, elapsed];
   if (counts.running > 0) headingParts.unshift(`${counts.running} running`);
@@ -33,10 +20,7 @@ export function renderWorkflowWidgetLines(
   if (counts.failed > 0) headingParts.unshift(theme.fg("error", `${counts.failed} failed`));
 
   const lines: string[] = [
-    truncateDisplay(
-      `${spinner} ${theme.bold(snapshot.title)} ${theme.fg("dim", "·")} ${theme.fg("muted", snapshot.currentPhase)} ${theme.fg("dim", "·")} ${headingParts.join(` ${theme.fg("dim", "·")} `)}`,
-      safeWidth,
-    ),
+    `${activity} ${theme.bold(snapshot.title)} ${theme.fg("dim", "·")} ${theme.fg("muted", snapshot.currentPhase)} ${theme.fg("dim", "·")} ${headingParts.join(` ${theme.fg("dim", "·")} `)}`,
   ];
 
   const footer = footerLine(snapshot, theme);
@@ -46,53 +30,13 @@ export function renderWorkflowWidgetLines(
   const visibleBodyLinesToRender = reserveHiddenLine ? body.lines.slice(0, Math.max(0, bodyBudget - 1)) : body.lines;
   const hidden = body.hidden + (body.lines.length - visibleBodyLinesToRender.length);
 
-  for (const line of visibleBodyLinesToRender) lines.push(truncateDisplay(line, safeWidth));
+  lines.push(...visibleBodyLinesToRender);
   if (hidden > 0 && lines.length < MAX_WIDGET_LINES) {
-    lines.push(truncateDisplay(`${theme.fg("dim", "└─")} ${theme.fg("dim", `+${hidden} more`)}`, safeWidth));
+    lines.push(`${theme.fg("dim", "└─")} ${theme.fg("dim", `+${hidden} more`)}`);
   }
-  if (footer && lines.length < MAX_WIDGET_LINES) lines.push(truncateDisplay(footer, safeWidth));
-
-  return lines.slice(0, MAX_WIDGET_LINES).map((line) => truncateDisplay(line, safeWidth));
-}
-
-class LiveWorkflowWidget implements WorkflowWidget {
-  private frame = 0;
-  private cachedWidth: number | undefined;
-  private cachedFrame: number | undefined;
-  private cachedDoneAt: number | undefined;
-  private cachedLines: string[] | undefined;
-
-  constructor(private readonly snapshotProvider: () => WorkflowProgressSnapshot) {}
+  if (footer && lines.length < MAX_WIDGET_LINES) lines.push(footer);
 
-  nextFrame(): void {
-    this.frame = (this.frame + 1) % SPINNER.length;
-    this.invalidate();
-  }
-
-  render(width: number, theme: Theme): string[] {
-    const snapshot = this.snapshotProvider();
-    if (
-      this.cachedLines &&
-      this.cachedWidth === width &&
-      this.cachedFrame === this.frame &&
-      this.cachedDoneAt === snapshot.doneAt
-    ) {
-      return this.cachedLines;
-    }
-
-    this.cachedLines = renderWorkflowWidgetLines(snapshot, this.frame, width, theme);
-    this.cachedWidth = width;
-    this.cachedFrame = this.frame;
-    this.cachedDoneAt = snapshot.doneAt;
-    return this.cachedLines;
-  }
-
-  invalidate(): void {
-    this.cachedWidth = undefined;
-    this.cachedFrame = undefined;
-    this.cachedDoneAt = undefined;
-    this.cachedLines = undefined;
-  }
+  return lines.slice(0, MAX_WIDGET_LINES);
 }
 
 interface AgentCounts {
@@ -173,9 +117,10 @@ function agentLine(agent: AgentRowSnapshot, theme: Theme): string {
 }
 
 function footerLine(snapshot: WorkflowProgressSnapshot, theme: Theme): string | undefined {
+  const usage = formatWorkflowUsageLine(snapshot.usage);
   const counters = snapshot.counters.slice(0, 4).map((counter) => `${counter.label} ${formatCount(counter.value)}`);
   const latestLog = snapshot.logs[snapshot.logs.length - 1];
-  const parts = counters.length > 0 ? counters : [];
+  const parts = usage ? [usage, ...counters] : counters;
   if (latestLog) parts.push(latestLog);
   if (parts.length === 0) return undefined;
   return `${theme.fg("dim", "└─")} ${theme.fg("dim", parts.join(" · "))}`;