pi-workflow-engine 0.1.0 → 0.2.0

package/src/ui/workflow-format.ts

@@ -0,0 +1,83 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { WorkflowProgressSnapshot } from "../progress.ts";
+import type { WorkflowLaneItemStatus } from "../types.ts";
+
+export type WorkflowDisplayStatus = WorkflowLaneItemStatus | "queued" | "done" | "failed";
+export type WorkflowThemeColor = Parameters<Theme["fg"]>[0];
+
+export function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms <= 0) return "0s";
+  if (ms < 1_000) return `${Math.round(ms)}ms`;
+
+  const totalSeconds = Math.floor(ms / 1_000);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return seconds === 0 ? `${minutes}m` : `${minutes}m ${seconds}s`;
+
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return remainingMinutes === 0 ? `${hours}h` : `${hours}h ${remainingMinutes}m`;
+}
+
+export function formatCount(n: number): string {
+  if (!Number.isFinite(n)) return "0";
+  const sign = n < 0 ? "-" : "";
+  const value = Math.abs(n);
+  if (value < 1_000) return `${Math.trunc(n)}`;
+  if (value < 1_000_000) return `${sign}${formatCompact(value / 1_000)}k`;
+  return `${sign}${formatCompact(value / 1_000_000)}m`;
+}
+
+export function statusIcon(status: WorkflowDisplayStatus, theme: Theme): string {
+  switch (status) {
+    case "success":
+    case "done":
+      return theme.fg("success", "✓");
+    case "warning":
+      return theme.fg("warning", "!");
+    case "error":
+    case "failed":
+      return theme.fg("error", "✗");
+    case "running":
+      return theme.fg("accent", "●");
+    case "queued":
+    case "pending":
+      return theme.fg("dim", "○");
+  }
+}
+
+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);
+}
+
+export function statusText(snapshot: WorkflowProgressSnapshot, theme: Theme): string | undefined {
+  if (snapshot.doneAt !== undefined) return undefined;
+
+  const agents = snapshot.phases.flatMap((phase) => phase.agents);
+  const complete = agents.filter((agent) => agent.status === "done" || agent.status === "failed").length;
+  const active = agents.filter((agent) => agent.status === "running" || agent.status === "queued").length;
+  const total = agents.length;
+  const kept = snapshot.counters.find((counter) => counter.key === "kept" || counter.label.toLowerCase() === "kept");
+  const displayName = snapshot.title === "code-review" ? "review" : snapshot.title;
+
+  const parts = [theme.fg("accent", displayName), theme.fg("muted", snapshot.currentPhase)];
+  if (total > 0) parts.push(theme.fg("muted", `${complete}/${total}`));
+  if (kept) parts.push(theme.fg("success", `${formatCount(kept.value)} kept`));
+  else if (active > 0) parts.push(theme.fg("muted", `${active} active`));
+
+  return parts.join(theme.fg("dim", " · "));
+}
+
+function formatCompact(value: number): string {
+  if (value >= 100) return `${Math.round(value)}`;
+  const rounded = Math.round(value * 10) / 10;
+  return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(1);
+}

package/src/ui/workflow-inspector.ts

@@ -0,0 +1,248 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, type TUI, visibleWidth } from "@earendil-works/pi-tui";
+import type { AgentRowSnapshot, WorkflowLaneItemSnapshot, WorkflowProgressSnapshot } from "../progress.ts";
+import { formatCount, formatDuration, statusIcon, truncateDisplay } from "./workflow-format.ts";
+
+type Section = "Overview" | "Agents" | "Findings" | "Logs";
+
+interface InspectorLine {
+  text: string;
+  selectable?: boolean;
+  key?: string;
+}
+
+const SECTIONS: readonly Section[] = ["Overview", "Agents", "Findings", "Logs"];
+
+export class WorkflowInspector {
+  private sectionIndex = 0;
+  private readonly selected: Record<Section, number> = { Overview: 0, Agents: 0, Findings: 0, Logs: 0 };
+  private readonly expanded = new Set<string>();
+
+  constructor(
+    private readonly snapshotProvider: () => WorkflowProgressSnapshot,
+    private readonly tui: Pick<TUI, "requestRender" | "terminal">,
+    private readonly theme: Theme,
+    private readonly close: () => void,
+  ) {}
+
+  handleInput(data: string): void {
+    if (matchesKey(data, "escape") || data === "q") {
+      this.close();
+      return;
+    }
+
+    if (matchesKey(data, "tab")) {
+      this.sectionIndex = (this.sectionIndex + 1) % SECTIONS.length;
+      this.requestRender();
+      return;
+    }
+
+    const section = this.currentSection();
+    const count = this.itemCount(section);
+    if (matchesKey(data, "up")) {
+      this.selected[section] = Math.max(0, this.selected[section] - 1);
+      this.requestRender();
+      return;
+    }
+    if (matchesKey(data, "down")) {
+      this.selected[section] = Math.min(Math.max(0, count - 1), this.selected[section] + 1);
+      this.requestRender();
+      return;
+    }
+    if (matchesKey(data, "return") || matchesKey(data, "enter")) {
+      const key = this.selectedKey(section);
+      if (key) {
+        if (this.expanded.has(key)) this.expanded.delete(key);
+        else this.expanded.add(key);
+        this.requestRender();
+      }
+    }
+  }
+
+  render(width: number): string[] {
+    const w = Math.max(24, width);
+    const inner = Math.max(1, w - 4);
+    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));
+    }
+
+    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(
+        `${th.fg("dim", `${body.length} lines · ${pct} · ${selected}/${count}`)} ${th.fg("dim", "· tab sections · ↑↓ select · enter expand · q/esc close")}`,
+        inner,
+      ),
+    );
+    lines.push(th.fg("border", `╰${"─".repeat(w - 2)}╯`));
+    return lines.map((line) => truncateDisplay(line, w));
+  }
+
+  invalidate(): void {}
+
+  private currentSection(): Section {
+    return SECTIONS[this.sectionIndex] ?? "Overview";
+  }
+
+  private requestRender(): void {
+    this.tui.requestRender();
+  }
+
+  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;
+    }).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", "│");
+  }
+
+  private itemCount(section: Section): number {
+    return this.sectionLines(section, this.snapshotProvider(), 80).filter((line) => line.selectable).length;
+  }
+
+  private selectedKey(section: Section): string | undefined {
+    let index = -1;
+    for (const line of this.sectionLines(section, this.snapshotProvider(), 80)) {
+      if (!line.selectable) continue;
+      index++;
+      if (index === this.selected[section]) return line.key;
+    }
+    return undefined;
+  }
+
+  private selectedLineIndex(lines: readonly InspectorLine[]): number {
+    let index = -1;
+    for (let i = 0; i < lines.length; i++) {
+      if (!lines[i].selectable) continue;
+      index++;
+      if (index === this.selected[this.currentSection()]) return i;
+    }
+    return 0;
+  }
+
+  private sectionLines(section: Section, snapshot: WorkflowProgressSnapshot, width: number): InspectorLine[] {
+    switch (section) {
+      case "Overview":
+        return this.overviewLines(snapshot, width);
+      case "Agents":
+        return this.agentLines(snapshot, width);
+      case "Findings":
+        return this.findingLines(snapshot, width);
+      case "Logs":
+        return this.logLines(snapshot);
+    }
+  }
+
+  private overviewLines(snapshot: WorkflowProgressSnapshot, width: number): InspectorLine[] {
+    const elapsed = formatDuration((snapshot.doneAt ?? Date.now()) - snapshot.startedAt);
+    const lines: InspectorLine[] = [
+      { 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" },
+    ];
+    if (snapshot.counters.length > 0) {
+      lines.push({ text: this.theme.fg("dim", "Counters") });
+      for (const counter of snapshot.counters) {
+        lines.push({ text: `  ${counter.label}: ${formatCount(counter.value)}`, selectable: true, key: `counter:${counter.key}` });
+      }
+    }
+    if (snapshot.summary.length > 0) {
+      lines.push({ text: this.theme.fg("dim", "Summary") });
+      for (const [key, value] of snapshot.summary) {
+        lines.push({ text: truncateDisplay(`  ${key}: ${value}`, width), selectable: true, key: `summary:${key}` });
+      }
+    }
+    return lines;
+  }
+
+  private agentLines(snapshot: WorkflowProgressSnapshot, _width: number): InspectorLine[] {
+    const lines: InspectorLine[] = [];
+    let selectableIndex = -1;
+    for (const phase of snapshot.phases) {
+      if (phase.agents.length === 0) continue;
+      lines.push({ text: this.theme.fg("dim", phase.title) });
+      for (const agent of phase.agents) {
+        selectableIndex++;
+        const key = `agent:${agent.id}`;
+        const selected = this.currentSection() === "Agents" && this.selected.Agents === selectableIndex;
+        lines.push({ text: this.agentLine(agent, selected), selectable: true, key });
+        if (this.expanded.has(key)) lines.push(...this.agentDetails(agent));
+      }
+    }
+    return lines.length > 0 ? lines : [{ text: this.theme.fg("dim", "No agents yet.") }];
+  }
+
+  private agentLine(agent: AgentRowSnapshot, selected: boolean): string {
+    const elapsed = agent.startedAt === undefined ? "queued" : formatDuration((agent.doneAt ?? Date.now()) - agent.startedAt);
+    const details = [`${agent.toolUses} tools`, elapsed];
+    if (agent.lastTool) details.unshift(agent.lastTool);
+    const text = `${statusIcon(agent.status, this.theme)} ${agent.label} ${this.theme.fg("dim", `· ${details.join(" · ")}`)}`;
+    return selected ? this.theme.bg("selectedBg", text) : text;
+  }
+
+  private agentDetails(agent: AgentRowSnapshot): InspectorLine[] {
+    const lines: InspectorLine[] = [];
+    if (agent.error) lines.push({ text: `    ${this.theme.fg("error", `Error: ${agent.error}`)}` });
+    if (agent.lastTool) lines.push({ text: `    ${this.theme.fg("dim", `Last tool: ${agent.lastTool}`)}` });
+    return lines.length > 0 ? lines : [{ text: `    ${this.theme.fg("dim", "No details yet.")}` }];
+  }
+
+  private findingLines(snapshot: WorkflowProgressSnapshot, _width: number): InspectorLine[] {
+    const lines: InspectorLine[] = [];
+    let selectableIndex = -1;
+    for (const [lane, items] of snapshot.lanes) {
+      lines.push({ text: this.theme.fg("dim", `${lane} (${items.length})`) });
+      items.forEach((item, index) => {
+        selectableIndex++;
+        const key = `finding:${lane}:${index}:${item.createdAt}`;
+        const selected = this.currentSection() === "Findings" && this.selected.Findings === selectableIndex;
+        lines.push({ text: this.findingLine(item, selected), selectable: true, key });
+        if (this.expanded.has(key) && item.details) lines.push({ text: `    ${this.theme.fg("dim", item.details)}` });
+      });
+    }
+    return lines.length > 0 ? lines : [{ text: this.theme.fg("dim", "No findings lanes yet.") }];
+  }
+
+  private findingLine(item: WorkflowLaneItemSnapshot, selected: boolean): string {
+    const subtitle = item.subtitle ? ` ${this.theme.fg("accent", item.subtitle)}` : "";
+    const text = `${statusIcon(item.status, this.theme)} ${item.title}${subtitle}`;
+    return selected ? this.theme.bg("selectedBg", text) : text;
+  }
+
+  private logLines(snapshot: WorkflowProgressSnapshot): InspectorLine[] {
+    if (snapshot.logs.length === 0) return [{ text: this.theme.fg("dim", "No logs yet.") }];
+    return snapshot.logs.map((log, index) => {
+      const key = `log:${index}`;
+      const selected = this.currentSection() === "Logs" && this.selected.Logs === index;
+      const text = selected ? this.theme.bg("selectedBg", log) : log;
+      return { text, selectable: true, key };
+    });
+  }
+}
+
+function padRight(text: string, width: number): string {
+  const visible = visibleWidth(text);
+  return text + " ".repeat(Math.max(0, width - visible));
+}

package/src/ui/workflow-result-renderer.ts

@@ -0,0 +1,149 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Box, type Component, Text } from "@earendil-works/pi-tui";
+import { badge, formatCount } from "./workflow-format.ts";
+
+export interface WorkflowResultEnvelope {
+  name: string;
+  result: unknown;
+  completedAt: number;
+}
+
+export interface CodeReviewFinding {
+  file: string;
+  line?: number;
+  severity?: string;
+  verdict?: string;
+  summary: string;
+  evidence?: string;
+  failure_scenario?: string;
+}
+
+export interface CodeReviewResult {
+  summary: string;
+  findings: CodeReviewFinding[];
+  stats?: Record<string, string | number>;
+}
+
+export function isWorkflowResult(value: unknown): value is WorkflowResultEnvelope {
+  if (!isRecord(value)) return false;
+  return typeof value.name === "string" && "result" in value && typeof value.completedAt === "number";
+}
+
+export function isFinding(value: unknown): value is CodeReviewFinding {
+  if (!isRecord(value)) return false;
+  if (typeof value.file !== "string" || typeof value.summary !== "string") return false;
+  if (value.line !== undefined && typeof value.line !== "number") return false;
+  if (value.severity !== undefined && typeof value.severity !== "string") return false;
+  if (value.verdict !== undefined && typeof value.verdict !== "string") return false;
+  if (value.evidence !== undefined && typeof value.evidence !== "string") return false;
+  if (value.failure_scenario !== undefined && typeof value.failure_scenario !== "string") return false;
+  return true;
+}
+
+export function isCodeReviewResult(value: unknown): value is CodeReviewResult {
+  if (!isRecord(value)) return false;
+  if (typeof value.summary !== "string" || !Array.isArray(value.findings)) return false;
+  if (!value.findings.every(isFinding)) return false;
+  if (value.stats !== undefined && !isStats(value.stats)) return false;
+  return true;
+}
+
+export function renderWorkflowResult(name: string, result: unknown, expanded: boolean, theme: Theme): Component {
+  const box = new Box(1, 1, (text) => theme.bg("customMessageBg", text));
+  box.addChild(new Text(renderWorkflowResultText(name, result, expanded, theme), 0, 0));
+  return box;
+}
+
+export function renderWorkflowResultText(name: string, result: unknown, expanded: boolean, theme: Theme): string {
+  if (name === "code-review" && isCodeReviewResult(result)) {
+    return renderCodeReviewResult(name, result, expanded, theme);
+  }
+  return renderGenericWorkflowResult(name, result, expanded, theme);
+}
+
+function renderCodeReviewResult(name: string, result: CodeReviewResult, expanded: boolean, theme: Theme): string {
+  const icon = theme.fg("success", "✓");
+  const title = theme.fg("accent", theme.bold(`Workflow: ${name}`));
+  const lines = [`${icon} ${title}`, theme.fg("muted", result.summary)];
+  const stats = statsLine(result.stats, theme);
+  if (stats) lines.push(stats);
+
+  if (result.findings.length === 0) {
+    lines.push(theme.fg("success", "No findings."));
+    return lines.join("\n");
+  }
+
+  const findings = expanded ? result.findings : result.findings.slice(0, 3);
+  lines.push(theme.fg("dim", expanded ? "Findings:" : "Top findings:"));
+  for (const finding of findings) {
+    lines.push(renderFinding(finding, expanded, theme));
+  }
+  if (!expanded && result.findings.length > findings.length) {
+    lines.push(theme.fg("dim", `… ${result.findings.length - findings.length} more finding(s)`));
+  }
+  return lines.join("\n");
+}
+
+function renderFinding(finding: CodeReviewFinding, expanded: boolean, theme: Theme): string {
+  const location = `${finding.file}${finding.line != null ? `:${finding.line}` : ""}`;
+  const severityColor = finding.severity === "bug" ? "error" : "warning";
+  const verdictColor = finding.verdict === "CONFIRMED" ? "success" : finding.verdict === "PLAUSIBLE" ? "warning" : "muted";
+  let text =
+    `  ${badge(finding.severity ?? "finding", severityColor, theme)} ` +
+    `${badge(finding.verdict ?? "", verdictColor, theme)} ` +
+    `${theme.fg("accent", location)} ${theme.fg("muted", finding.summary)}`;
+  if (expanded) {
+    if (finding.failure_scenario) text += `\n    ${theme.fg("dim", `Failure: ${finding.failure_scenario}`)}`;
+    if (finding.evidence) text += `\n    ${theme.fg("dim", `Evidence: ${finding.evidence}`)}`;
+  }
+  return text;
+}
+
+function renderGenericWorkflowResult(name: string, result: unknown, expanded: boolean, theme: Theme): string {
+  const lines = [`${theme.fg("success", "✓")} ${theme.fg("accent", theme.bold(`Workflow: ${name}`))}`];
+  const summary = extractSummary(result);
+  if (summary) lines.push(theme.fg("muted", summary));
+  if (expanded) lines.push(theme.fg("dim", safeJson(result)));
+  else if (!summary) lines.push(theme.fg("dim", compactJson(result)));
+  return lines.join("\n");
+}
+
+function statsLine(stats: Record<string, string | number> | undefined, theme: Theme): string | undefined {
+  if (!stats) return undefined;
+  const ordered = ["files", "candidates", "dropped", "verified", "kept"];
+  const parts = ordered.flatMap((key) => {
+    const value = stats[key];
+    if (value === undefined) return [];
+    return [`${key} ${typeof value === "number" ? formatCount(value) : value}`];
+  });
+  if (parts.length === 0) return undefined;
+  return theme.fg("dim", parts.join(" · "));
+}
+
+function extractSummary(value: unknown): string | undefined {
+  if (typeof value === "string") return value;
+  if (isRecord(value) && typeof value.summary === "string") return value.summary;
+  return undefined;
+}
+
+function compactJson(value: unknown): string {
+  const json = safeJson(value).replace(/\s+/g, " ").trim();
+  return json.length > 240 ? `${json.slice(0, 237)}...` : json;
+}
+
+function safeJson(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch (error) {
+    return error instanceof Error ? error.message : String(error);
+  }
+}
+
+function isStats(value: unknown): value is Record<string, string | number> {
+  if (!isRecord(value)) return false;
+  return Object.values(value).every((entry) => typeof entry === "string" || typeof entry === "number");
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}

package/src/ui/workflow-widget.ts

@@ -0,0 +1,143 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { AgentRowSnapshot, PhaseSnapshot, WorkflowProgressSnapshot } from "../progress.ts";
+import { formatCount, formatDuration, statusIcon, truncateDisplay } 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);
+}
+
+export function renderWorkflowWidgetLines(
+  snapshot: WorkflowProgressSnapshot,
+  frame: number,
+  width: number,
+  theme: Theme,
+): string[] {
+  const safeWidth = Math.max(1, width);
+  const agents = snapshot.phases.flatMap((phase) => phase.agents);
+  const running = agents.filter((agent) => agent.status === "running").length;
+  const queued = agents.filter((agent) => agent.status === "queued").length;
+  const done = agents.filter((agent) => agent.status === "done").length;
+  const failed = agents.filter((agent) => agent.status === "failed").length;
+  const active = running + 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 headingParts = [`${done}/${agents.length} done`, elapsed];
+  if (running > 0) headingParts.unshift(`${running} running`);
+  if (queued > 0) headingParts.unshift(`${queued} queued`);
+  if (failed > 0) headingParts.unshift(theme.fg("error", `${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,
+    ),
+  ];
+
+  const footer = footerLine(snapshot, theme);
+  const bodyBudget = Math.max(0, MAX_WIDGET_LINES - lines.length - (footer ? 1 : 0));
+  const bodyLines = prioritizedBodyLines(snapshot.phases, theme);
+  const visibleBody = bodyLines.slice(0, bodyBudget);
+  const hidden = bodyLines.length - visibleBody.length;
+
+  for (const line of visibleBody) lines.push(truncateDisplay(line, safeWidth));
+  if (hidden > 0 && lines.length < MAX_WIDGET_LINES) {
+    lines.push(truncateDisplay(`${theme.fg("dim", "└─")} ${theme.fg("dim", `+${hidden} more`)}`, safeWidth));
+  }
+  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) {}
+
+  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;
+  }
+}
+
+function prioritizedBodyLines(phases: readonly PhaseSnapshot[], theme: Theme): string[] {
+  const activePhases = phases.filter((phase) => phase.agents.some((agent) => agent.status === "running" || agent.status === "queued"));
+  const inactivePhases = phases.filter((phase) => !activePhases.includes(phase));
+  return [...activePhases, ...inactivePhases].flatMap((phase) => phaseLines(phase, theme));
+}
+
+function phaseLines(phase: PhaseSnapshot, theme: Theme): string[] {
+  if (phase.agents.length === 0 && phase.title === "Workflow") return [];
+  const running = phase.agents.filter((agent) => agent.status === "running").length;
+  const done = phase.agents.filter((agent) => agent.status === "done").length;
+  const failed = phase.agents.filter((agent) => agent.status === "failed").length;
+  const parts: string[] = [];
+  if (running > 0) parts.push(`${running} running`);
+  if (done > 0) parts.push(`${done} done`);
+  if (failed > 0) parts.push(`${failed} failed`);
+
+  const lines = [`${theme.fg("dim", "├─")} ${theme.fg(running > 0 ? "accent" : "muted", phase.title)}${parts.length ? ` ${theme.fg("dim", `(${parts.join(" · ")})`)}` : ""}`];
+  const active = phase.agents.filter((agent) => agent.status === "running" || agent.status === "queued");
+  const failedAgents = phase.agents.filter((agent) => agent.status === "failed");
+  const completed = phase.agents.filter((agent) => agent.status === "done");
+  for (const agent of [...active, ...failedAgents, ...completed]) lines.push(agentLine(agent, theme));
+  return lines;
+}
+
+function agentLine(agent: AgentRowSnapshot, theme: Theme): string {
+  const detailParts: string[] = [];
+  if (agent.toolUses > 0) detailParts.push(`${agent.toolUses} tool${agent.toolUses === 1 ? "" : "s"}`);
+  if (agent.status === "running" && agent.lastTool) detailParts.push(agent.lastTool);
+  if (agent.startedAt !== undefined) detailParts.push(formatDuration((agent.doneAt ?? Date.now()) - agent.startedAt));
+  if (agent.status === "failed" && agent.error) detailParts.push(agent.error);
+
+  const activity = detailParts.length > 0 ? ` ${theme.fg("dim", `· ${detailParts.join(" · ")}`)}` : "";
+  return `${theme.fg("dim", "│  ")} ${statusIcon(agent.status, theme)} ${theme.fg(agent.status === "running" ? "text" : "muted", agent.label)}${activity}`;
+}
+
+function footerLine(snapshot: WorkflowProgressSnapshot, theme: Theme): string | undefined {
+  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 : [];
+  if (latestLog) parts.push(latestLog);
+  if (parts.length === 0) return undefined;
+  return `${theme.fg("dim", "└─")} ${theme.fg("dim", parts.join(" · "))}`;
+}