@maplezzk/pi-dynamic-workflows 1.0.0

package/src/display.ts

@@ -0,0 +1,710 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { createTranslator, loadCatalog } from "pi-extensions-i18n";
+import type { WorkflowMeta } from "./workflow.ts";
+
+const i18n = createTranslator(loadCatalog(new URL("../locales/index.json", import.meta.url)));
+
+export type WorkflowAgentStatus = "queued" | "running" | "done" | "error" | "skipped";
+
+export interface WorkflowAgentSnapshot {
+  id: number;
+  label: string;
+  phase?: string;
+  prompt: string;
+  status: WorkflowAgentStatus;
+  resultPreview?: string;
+  error?: string;
+  startedAt?: number;
+  finishedAt?: number;
+}
+
+export interface WorkflowSnapshot {
+  name: string;
+  description?: string;
+  phases: string[];
+  currentPhase?: string;
+  logs: string[];
+  agents: WorkflowAgentSnapshot[];
+  agentCount: number;
+  runningCount: number;
+  doneCount: number;
+  errorCount: number;
+  durationMs?: number;
+  result?: unknown;
+  resultFile?: string;
+  startedAt?: number;
+}
+
+export interface WorkflowDisplay {
+  update(snapshot: WorkflowSnapshot): void;
+  complete(snapshot: WorkflowSnapshot): void;
+  clear(): void;
+}
+
+export interface WorkflowDisplayOptions {
+  key?: string;
+  placement?: "aboveEditor" | "belowEditor";
+  maxAgents?: number;
+  maxLogs?: number;
+  showStatus?: boolean;
+  showResultPreviews?: boolean;
+}
+
+export function createWorkflowSnapshot(meta: WorkflowMeta): WorkflowSnapshot {
+  return {
+    name: meta.name,
+    description: meta.description,
+    phases: meta.phases.map((p) => p.title),
+    logs: [],
+    agents: [],
+    agentCount: 0,
+    runningCount: 0,
+    doneCount: 0,
+    errorCount: 0,
+  };
+}
+
+export function recomputeWorkflowSnapshot(snapshot: WorkflowSnapshot): WorkflowSnapshot {
+  const runningCount = snapshot.agents.filter((agent) => agent.status === "running").length;
+  const doneCount = snapshot.agents.filter((agent) => agent.status === "done").length;
+  const errorCount = snapshot.agents.filter((agent) => agent.status === "error").length;
+  return { ...snapshot, agentCount: snapshot.agents.length, runningCount, doneCount, errorCount };
+}
+
+export function createWidgetWorkflowDisplay(
+  ctx: Pick<ExtensionContext, "ui" | "hasUI">,
+  options: WorkflowDisplayOptions = {},
+): WorkflowDisplay {
+  const key = options.key ?? "workflow";
+  const placement = options.placement ?? "belowEditor";
+  const showStatus = options.showStatus ?? false;
+
+  const render = (snapshot: WorkflowSnapshot, completed = false) => {
+    if (!ctx.hasUI) return;
+    if (showStatus) ctx.ui.setStatus(key, statusLine(snapshot, completed));
+    ctx.ui.setWidget(key, renderWorkflowLines(snapshot, options), { placement });
+  };
+
+  return {
+    update(snapshot) {
+      render(snapshot, false);
+    },
+    complete(snapshot) {
+      render(snapshot, true);
+    },
+    clear() {
+      if (!ctx.hasUI) return;
+      if (showStatus) ctx.ui.setStatus(key, undefined);
+      ctx.ui.setWidget(key, undefined);
+    },
+  };
+}
+
+export function createToolUpdateWorkflowDisplay(
+  onUpdate: ((result: { content: Array<{ type: "text"; text: string }>; details: unknown }) => void) | undefined,
+  ctx?: Pick<ExtensionContext, "ui" | "hasUI">,
+  options: WorkflowDisplayOptions & { streamToolUpdates?: boolean } = {},
+): WorkflowDisplay {
+  const widget = ctx ? createWidgetWorkflowDisplay(ctx, options) : undefined;
+  const streamToolUpdates = options.streamToolUpdates ?? !ctx?.hasUI;
+
+  const emit = (snapshot: WorkflowSnapshot, completed = false) => {
+    if (streamToolUpdates) {
+      onUpdate?.({
+        content: [{ type: "text", text: renderWorkflowText(snapshot, completed, options) }],
+        details: snapshot,
+      });
+    }
+    if (completed) widget?.complete(snapshot);
+    else widget?.update(snapshot);
+  };
+
+  return {
+    update(snapshot) {
+      emit(snapshot, false);
+    },
+    complete(snapshot) {
+      emit(snapshot, true);
+    },
+    clear() {
+      widget?.clear();
+    },
+  };
+}
+
+export function renderWorkflowLines(snapshot: WorkflowSnapshot, options: WorkflowDisplayOptions = {}): string[] {
+  const maxAgents = options.maxAgents ?? 8;
+  const maxLogs = options.maxLogs ?? 2;
+  const showResultPreviews = options.showResultPreviews ?? false;
+  const state =
+    snapshot.errorCount > 0
+      ? `, ${snapshot.errorCount} errors`
+      : snapshot.runningCount > 0
+        ? `, ${snapshot.runningCount} running`
+        : "";
+  const lines = [`◆ Workflow: ${snapshot.name} (${snapshot.doneCount}/${snapshot.agentCount} done${state})`];
+
+  const agentPhaseNames = snapshot.agents
+    .map((agent) => agent.phase)
+    .filter((phase): phase is string => Boolean(phase));
+  const phaseNames = unique([
+    ...snapshot.phases,
+    ...(snapshot.currentPhase ? [snapshot.currentPhase] : []),
+    ...agentPhaseNames,
+  ]);
+  const rendered = new Set<WorkflowAgentSnapshot>();
+
+  for (const phase of phaseNames) {
+    const agents = snapshot.agents.filter((agent) => agent.phase === phase);
+    if (agents.length === 0 && snapshot.currentPhase !== phase) continue;
+    for (const agent of agents) rendered.add(agent);
+    const done = agents.filter((agent) => agent.status === "done").length;
+    const running = agents.filter((agent) => agent.status === "running").length;
+    const errors = agents.filter((agent) => agent.status === "error").length;
+    const skipped = agents.filter((agent) => agent.status === "skipped").length;
+    const complete = agents.length > 0 && done + errors + skipped === agents.length;
+    const marker = running > 0 || (!complete && snapshot.currentPhase === phase) ? "▶" : complete ? "✓" : " ";
+    lines.push(
+      `  ${marker} ${phase} ${done}/${agents.length}${running ? ` · ${running} running` : ""}${errors ? ` · ${errors} errors` : ""}${skipped ? ` · ${skipped} skipped` : ""}`,
+    );
+
+    const visibleAgents = agents.slice(-maxAgents);
+    for (const agent of visibleAgents) {
+      const order = `#${agent.id}`;
+      const result = showResultPreviews && agent.resultPreview ? ` — ${agent.resultPreview}` : "";
+      const err = agent.status === "error" && agent.error ? ` [${shorten(agent.error, 80)}]` : "";
+      lines.push(`    ${order} ${statusIcon(agent.status)} ${shorten(agent.label, 48)}${result}${err}`);
+    }
+    if (agents.length > visibleAgents.length)
+      lines.push(`    … ${agents.length - visibleAgents.length} earlier agents`);
+  }
+
+  const unphased = snapshot.agents.filter((agent) => !rendered.has(agent));
+  if (unphased.length) {
+    lines.push("  Unphased");
+    for (const agent of unphased.slice(-maxAgents)) {
+      const result = showResultPreviews && agent.resultPreview ? ` — ${agent.resultPreview}` : "";
+      const err = agent.status === "error" && agent.error ? ` [${shorten(agent.error, 80)}]` : "";
+      lines.push(`    #${agent.id} ${statusIcon(agent.status)} ${shorten(agent.label, 48)}${result}${err}`);
+    }
+  }
+
+  const visibleLogs = snapshot.logs.slice(-maxLogs);
+  if (visibleLogs.length) {
+    if (lines.length > 1) lines.push("");
+    for (const log of visibleLogs) lines.push(`  log: ${log}`);
+  }
+
+  // 附加最终结果文件路径
+  if (snapshot.resultFile && snapshot.runningCount === 0) {
+    if (lines.length > 0) lines.push("");
+    lines.push(`  ${i18n.t("totalResult", { path: snapshot.resultFile })}`);
+  }
+
+  return lines;
+}
+
+export function renderWorkflowText(
+  snapshot: WorkflowSnapshot,
+  completed = false,
+  options: WorkflowDisplayOptions = {},
+): string {
+  const header = completed ? "Workflow completed" : "Workflow running";
+  return [header, ...renderWorkflowLines(snapshot, options)].join("\n");
+}
+
+// 仿 pi-interactive-subagents 的 formatStatusLine：
+// 每行一个 agent 状态，格式：`{label} {state detail} {elapsed}.`
+export function formatAgentStatusLine(agent: WorkflowAgentSnapshot, now = Date.now()): string {
+  const label = shorten(agent.label, 64);
+  const elapsed = agent.startedAt ? ((agent.finishedAt ?? now) - agent.startedAt) / 1000 : 0;
+  const elapsedText = `${elapsed.toFixed(1)}s`;
+  if (agent.status === "running") {
+    return `${label} running ${elapsedText}, active.`;
+  }
+  if (agent.status === "done") {
+    return `${label} finished in ${elapsedText}.`;
+  }
+  if (agent.status === "error") {
+    return `${label} failed after ${elapsedText}${agent.error ? ` (${shorten(agent.error, 60)})` : ""}.`;
+  }
+  if (agent.status === "skipped") {
+    return `${label} skipped.`;
+  }
+  return `${label} queued.`;
+}
+
+// 汇总所有 active agent（queued + running），其他只输出当前 phase 的进行中 agent
+export function formatWorkflowStatusAggregate(
+  snapshot: WorkflowSnapshot,
+  lineLimit = 4,
+  now = Date.now(),
+): { lines: string[]; overflow: number } {
+  const running = snapshot.agents.filter((a) => a.status === "running");
+  const queued = snapshot.agents.filter((a) => a.status === "queued");
+  const recent = [...running, ...queued].slice(0, lineLimit);
+  const lines = recent.map((a) => formatAgentStatusLine(a, now));
+  const overflow = Math.max(0, running.length + queued.length - recent.length);
+  return { lines, overflow };
+}
+
+function statusLine(snapshot: WorkflowSnapshot, completed: boolean): string {
+  if (completed) return `workflow ✓ ${snapshot.name}: ${snapshot.doneCount}/${snapshot.agentCount}`;
+  if (snapshot.runningCount > 0)
+    return `workflow ${snapshot.name}: ${snapshot.runningCount} running, ${snapshot.doneCount}/${snapshot.agentCount} done`;
+  return `workflow ${snapshot.name}: ${snapshot.doneCount}/${snapshot.agentCount} done`;
+}
+
+function statusIcon(status: WorkflowAgentStatus): string {
+  switch (status) {
+    case "queued":
+      return "○";
+    case "running":
+      return "●";
+    case "done":
+      return "✓";
+    case "error":
+      return "✗";
+    case "skipped":
+      return "-";
+  }
+}
+
+function unique(values: string[]): string[] {
+  return [...new Set(values)];
+}
+
+function shorten(value: string, max: number): string {
+  const text = value.replace(/\s+/g, " ").trim();
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+/**
+ * CJK 双宽字符检测：返回字符的终端可见宽度（1 或 2）。
+ */
+function cjkCharWidth(code: number): number {
+  if (
+    (code >= 0x1100 && code <= 0x115f) ||
+    (code >= 0x2e80 && code <= 0xa4cf && code !== 0x303f) ||
+    (code >= 0xac00 && code <= 0xd7af) ||
+    (code >= 0xf900 && code <= 0xfaff) ||
+    (code >= 0xfe10 && code <= 0xfe6f) ||
+    (code >= 0xff01 && code <= 0xff60) ||
+    (code >= 0xffe0 && code <= 0xffe6) ||
+    (code >= 0x20000 && code <= 0x2fffd) ||
+    (code >= 0x30000 && code <= 0x3fffd)
+  )
+    return 2;
+  return 1;
+}
+
+/**
+ * 计算字符串的终端可见宽度（考虑 CJK 双宽字符）。
+ */
+function visibleStrWidth(str: string): number {
+  let w = 0;
+  for (const ch of str) {
+    w += cjkCharWidth(ch.codePointAt(0) ?? 0);
+  }
+  return w;
+}
+
+/**
+ * 按可见宽度截断字符串，超出部分用省略号「…」替代。
+ * 用于 TUI widget 行内容截断，防止超出终端宽度导致 pi-tui 崩溃。
+ */
+function truncateVisible(str: string, maxWidth: number): string {
+  if (maxWidth <= 0) return "";
+  const w = visibleStrWidth(str);
+  if (w <= maxWidth) return str;
+  const target = maxWidth - 1; // 留给「…」
+  let result = "";
+  let currentWidth = 0;
+  for (const ch of str) {
+    const cw = cjkCharWidth(ch.codePointAt(0) ?? 0);
+    if (currentWidth + cw > target) break;
+    result += ch;
+    currentWidth += cw;
+  }
+  return `${result}…`;
+}
+
+export function preview(value: unknown, max = 200): string {
+  const text = typeof value === "string" ? value : JSON.stringify(value);
+  if (!text) return "";
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+export function formatElapsed(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 1000) return "<1s";
+  if (ms < 60000) return `${Math.floor(ms / 1000)}s`;
+  if (ms < 3600000) {
+    const m = Math.floor(ms / 60000);
+    const s = Math.floor((ms % 60000) / 1000);
+    return `${m}m ${s}s`;
+  }
+  const h = Math.floor(ms / 3600000);
+  const m = Math.floor((ms % 3600000) / 60000);
+  return `${h}h ${m}m`;
+}
+
+export interface WorkflowTheme {
+  fg: (color: string, text: string) => string;
+  bold: (text: string) => string;
+}
+
+export function renderWorkflowThemed(
+  snapshot: WorkflowSnapshot,
+  theme: WorkflowTheme,
+  options: WorkflowDisplayOptions = {},
+): string {
+  const showResultPreviews = options.showResultPreviews ?? false;
+  const maxAgents = options.maxAgents ?? 8;
+
+  const elapsed = snapshot.durationMs ? formatElapsed(snapshot.durationMs) : "";
+  const agentSummary = `${snapshot.agentCount} agents`;
+  const durationPart = elapsed ? ` · ${elapsed}` : "";
+
+  const lines: string[] = [];
+
+  // Header: ▸ {name} — {agentCount} agents · {duration}
+  lines.push(
+    `${theme.fg("accent", "▸")} ${theme.fg("toolTitle", theme.bold(snapshot.name))} ${theme.fg("dim", `— ${agentSummary}${durationPart}`)}`,
+  );
+  lines.push("");
+
+  // Group agents by phase
+  const agentPhaseNames = snapshot.agents
+    .map((agent) => agent.phase)
+    .filter((phase): phase is string => Boolean(phase));
+  const phaseNames = unique([
+    ...snapshot.phases,
+    ...(snapshot.currentPhase ? [snapshot.currentPhase] : []),
+    ...agentPhaseNames,
+  ]);
+  const rendered = new Set<WorkflowAgentSnapshot>();
+
+  for (const phase of phaseNames) {
+    const agents = snapshot.agents.filter((agent) => agent.phase === phase);
+    if (agents.length === 0 && snapshot.currentPhase !== phase) continue;
+    for (const agent of agents) rendered.add(agent);
+
+    const done = agents.filter((a) => a.status === "done").length;
+    const running = agents.filter((a) => a.status === "running").length;
+    const errors = agents.filter((a) => a.status === "error").length;
+    const skipped = agents.filter((a) => a.status === "skipped").length;
+    const complete = agents.length > 0 && done + errors + skipped === agents.length;
+
+    // Phase icon
+    let phaseIcon: string;
+    if (complete) {
+      phaseIcon = theme.fg("success", "✓");
+    } else if (running > 0 || snapshot.currentPhase === phase) {
+      phaseIcon = theme.fg("accent", "▶");
+    } else {
+      phaseIcon = theme.fg("dim", "○");
+    }
+
+    // Phase duration: first agent startedAt → last agent finishedAt
+    const phaseElapsed = computePhaseDuration(agents);
+    const phaseDurationText = phaseElapsed ? theme.fg("dim", formatElapsed(phaseElapsed)) : "";
+
+    lines.push(`  ${phaseIcon} ${phase}${phaseDurationText ? `  ${phaseDurationText}` : ""}`);
+
+    // Agents in this phase
+    const visibleAgents = agents.slice(-maxAgents);
+    for (const agent of visibleAgents) {
+      const order = `#${agent.id}`;
+      const icon = themedStatusIcon(agent.status, theme);
+      const label = theme.fg("toolOutput", shorten(agent.label, 48));
+      const agentElapsed = computeAgentDuration(agent);
+      const agentDurationText = agentElapsed ? `  ${theme.fg("dim", formatElapsed(agentElapsed))}` : "";
+      const err =
+        agent.status === "error" && agent.error ? ` ${theme.fg("error", `[${shorten(agent.error, 60)}]`)}` : "";
+      lines.push(`    ${order} ${icon} ${label}${agentDurationText}${err}`);
+
+      // Result preview (file path)
+      if (showResultPreviews && agent.resultPreview) {
+        lines.push(`         ${theme.fg("muted", agent.resultPreview)}`);
+      }
+    }
+    if (agents.length > visibleAgents.length) {
+      lines.push(`    ${theme.fg("dim", `… ${agents.length - visibleAgents.length} earlier agents`)}`);
+    }
+  }
+
+  // Unphased agents
+  const unphased = snapshot.agents.filter((agent) => !rendered.has(agent));
+  if (unphased.length) {
+    lines.push(`  ${theme.fg("dim", "Unphased")}`);
+    for (const agent of unphased.slice(-maxAgents)) {
+      const icon = themedStatusIcon(agent.status, theme);
+      const label = theme.fg("toolOutput", shorten(agent.label, 48));
+      const agentElapsed = computeAgentDuration(agent);
+      const agentDurationText = agentElapsed ? `  ${theme.fg("dim", formatElapsed(agentElapsed))}` : "";
+      const err =
+        agent.status === "error" && agent.error ? ` ${theme.fg("error", `[${shorten(agent.error, 60)}]`)}` : "";
+      lines.push(`    #${agent.id} ${icon} ${label}${agentDurationText}${err}`);
+      if (showResultPreviews && agent.resultPreview) {
+        lines.push(`         ${theme.fg("muted", agent.resultPreview)}`);
+      }
+    }
+  }
+
+  // Result file
+  if (snapshot.resultFile) {
+    lines.push("");
+    lines.push(`  ${theme.fg("muted", `📄 ${snapshot.resultFile}`)}`);
+  }
+
+  return lines.join("\n");
+}
+
+function themedStatusIcon(status: WorkflowAgentStatus, theme: WorkflowTheme): string {
+  switch (status) {
+    case "done":
+      return theme.fg("success", "✓");
+    case "error":
+      return theme.fg("error", "✗");
+    case "running":
+      return theme.fg("accent", "●");
+    case "queued":
+      return theme.fg("dim", "○");
+    case "skipped":
+      return theme.fg("dim", "-");
+  }
+}
+
+/**
+ * 渲染带边框的 Widget 状态栏行（用于 aboveEditor widget）。
+ * 使用 box-drawing 字符和硬编码 ANSI 色彩。
+ */
+export function renderWorkflowWidgetLines(snapshot: WorkflowSnapshot, width: number): string[] {
+  const ACCENT = "\x1b[38;2;77;163;255m";
+  const RST = "\x1b[0m";
+  const GREEN = "\x1b[32m";
+  const CYAN = "\x1b[36m";
+  const RED = "\x1b[31m";
+  const DIM = "\x1b[90m";
+
+  const MAX_VISIBLE_AGENTS = 6;
+  // boxWidth 必须严格不超过终端实际宽度，否则 pi-tui 会因行超出终端宽度而崩溃。
+  // 原先 Math.max(50, width) 在窄终端（如 43 列分屏）下强制设为 50，导致渲染行
+  // visible width=50 > 终端宽度 43，pi-tui 抛出 uncaughtException 退出。
+  // 修复：去掉 50 上限，让 widget 跟随终端实际宽度自适应填满。
+  // 最小 20 是为了保证极窄终端下 innerWidth=18 有足够空间显示基本内容。
+  const boxWidth = Math.max(20, width);
+  const innerWidth = boxWidth - 2; // exclude │ on each side
+
+  // 可见宽度辅助函数（考虑 CJK 双宽字符），已抽离为模块级 visibleStrWidth
+  const strWidth = visibleStrWidth;
+
+  // Helper: pad content line to fit inside box.
+  // 不变式：调用方保证 rawLen <= innerWidth，padLine 只补右侧空白到 innerWidth。
+  const padLine = (content: string, rawLen: number): string => {
+    const padding = Math.max(0, innerWidth - rawLen);
+    return `${ACCENT}│${RST}${content}${" ".repeat(padding)}${ACCENT}│${RST}`;
+  };
+
+  // Title line: ╭─ Workflow: {name} ──── {done}/{total} done ─╮
+  // 标题结构：╭ + ─ + titleText + ─*fill + statsText + ─ + ╮
+  // 总可见宽度 = 1(╭) + 1(─) + titleTextW + fillLen + statsTextW + 1(─) + 1(╮)
+  //           = 4 + titleTextW + fillLen + statsTextW
+  // fillLen 至少 1。极窄终端下逐步压缩 titlePrefix/statsText。
+  let titlePrefix = ` Workflow: `;
+  let statsText = ` ${snapshot.doneCount}/${snapshot.agentCount} done `;
+  // 判断在最小 fill(1) 下能否装下：4 + prefixW + 1(name至少1) + 1(fill) + statsW + 1(尾部空格) <= boxWidth
+  const tryFit = (prefix: string, stats: string): boolean =>
+    4 + strWidth(prefix) + 1 + 1 + strWidth(stats) + 1 <= boxWidth;
+  if (!tryFit(titlePrefix, statsText)) {
+    statsText = ` ${snapshot.doneCount}/${snapshot.agentCount} `;
+  }
+  if (!tryFit(titlePrefix, statsText)) {
+    titlePrefix = ` `;
+    statsText = `${snapshot.doneCount}/${snapshot.agentCount}`;
+  }
+  if (!tryFit(titlePrefix, statsText)) {
+    // 极窄：只显示 name + 边框
+    titlePrefix = ``;
+    statsText = ``;
+  }
+  // 固定占用 4（╭ ─ ─ ╮，不含 titleText/statsText/fill）
+  const fixedOverhead = 4;
+  // titleText = titlePrefix + name + " "（尾部空格）
+  const maxNameWidth = Math.max(1, boxWidth - fixedOverhead - strWidth(titlePrefix) - strWidth(statsText) - 2); // -1 尾空格 -1 fill
+  const truncatedName = truncateVisible(snapshot.name, maxNameWidth);
+  const titleText = `${titlePrefix}${truncatedName} `;
+  const fillLen = Math.max(1, boxWidth - fixedOverhead - strWidth(titleText) - strWidth(statsText));
+  const topLine = `${ACCENT}╭─${titleText}${"─".repeat(fillLen)}${statsText}─╮${RST}`;
+
+  // Bottom line: ╰ + ─*(boxWidth-2) + ╯
+  const bottomLine = `${ACCENT}╰${"─".repeat(boxWidth - 2)}╯${RST}`;
+
+  const lines: string[] = [topLine];
+
+  // Group agents by phase
+  const agentPhaseNames = snapshot.agents.map((a) => a.phase).filter((p): p is string => Boolean(p));
+  const phaseNames = unique([
+    ...snapshot.phases,
+    ...(snapshot.currentPhase ? [snapshot.currentPhase] : []),
+    ...agentPhaseNames,
+  ]);
+  const rendered = new Set<WorkflowAgentSnapshot>();
+
+  /** 渲染单个 agent 行。返回 padLine 后的字符串。 */
+  const renderAgentLine = (agent: WorkflowAgentSnapshot): string => {
+    const order = `#${agent.id}`;
+    const { icon } = widgetStatusIcon(agent.status);
+    const agentElapsed = computeAgentDuration(agent);
+    const elapsedText = agentElapsed ? formatElapsed(agentElapsed) : "";
+
+    const statusLabel =
+      agent.status === "done"
+        ? "done"
+        : agent.status === "running"
+          ? "running"
+          : agent.status === "error"
+            ? "error"
+            : "";
+    let rightText = elapsedText ? `${statusLabel} ${elapsedText}` : statusLabel;
+    let rightRawLen = rightText.length;
+    const statusColor =
+      agent.status === "done" ? GREEN : agent.status === "running" ? CYAN : agent.status === "error" ? RED : DIM;
+    let rightPart = rightText ? `${statusColor}${rightText}${RST}` : "";
+
+    // 布局："    " + order + " " + icon + " " + label + gap + rightText
+    // 左侧固定部分宽度（不含 label）：4(空格) + orderW + 1(空格) + 1(icon) + 1(空格)
+    const leftFixedWidth = 4 + order.length + 1 + 1 + 1;
+    // 如果有 rightText，需留至少 1 个 gap + rightRawLen
+    let minRightWidth = rightRawLen > 0 ? 1 + rightRawLen : 0;
+    // 极窄终端下 leftFixedWidth + minRightWidth 可能已超过 innerWidth。
+    // 此时逐步压缩：先去掉耗时，只留状态；再去掉状态，只留 label；最后连 label 也截断。
+    if (leftFixedWidth + minRightWidth > innerWidth) {
+      // 阶段 1：只留状态标签（去掉耗时）
+      rightText = statusLabel;
+      rightRawLen = rightText.length;
+      minRightWidth = rightRawLen > 0 ? 1 + rightRawLen : 0;
+    }
+    if (leftFixedWidth + minRightWidth > innerWidth) {
+      // 阶段 2：去掉右侧状态，只留左侧 label
+      rightText = "";
+      rightRawLen = 0;
+      rightPart = "";
+      minRightWidth = 0;
+    }
+    const labelMaxWidth = Math.max(1, innerWidth - leftFixedWidth - minRightWidth);
+    const label = truncateVisible(agent.label.replace(/\s+/g, " ").trim(), labelMaxWidth);
+
+    const leftPart = `    ${order} ${icon} ${label}`;
+    const leftRawLen = leftFixedWidth + strWidth(label);
+
+    // gap 填充剩余空间；如果没有 rightText，gap 可以是 0（label 占满）
+    const gapLen = Math.max(rightRawLen > 0 ? 1 : 0, innerWidth - leftRawLen - rightRawLen);
+    const agentLine = `${leftPart}${" ".repeat(gapLen)}${rightPart}`;
+    const agentRawLen = leftRawLen + gapLen + rightRawLen;
+    return padLine(agentLine, agentRawLen);
+  };
+
+  for (const phase of phaseNames) {
+    const agents = snapshot.agents.filter((a) => a.phase === phase);
+    for (const a of agents) rendered.add(a);
+
+    const done = agents.filter((a) => a.status === "done").length;
+    const running = agents.filter((a) => a.status === "running").length;
+    const errors = agents.filter((a) => a.status === "error").length;
+    const skipped = agents.filter((a) => a.status === "skipped").length;
+    const complete = agents.length > 0 && done + errors + skipped === agents.length;
+
+    // Phase icon
+    let phaseIcon: string;
+    if (complete) {
+      phaseIcon = `${GREEN}✓${RST}`;
+    } else if (running > 0 || snapshot.currentPhase === phase) {
+      phaseIcon = `${CYAN}▶${RST}`;
+    } else {
+      phaseIcon = `${DIM}○${RST}`;
+    }
+
+    // Phase 行：按可见宽度截断 phase 名称，防止超出 innerWidth
+    // 布局："  " + icon(1) + " " + phaseName，总共占 2+1+1+nameW = 4+nameW
+    const phaseNameMaxWidth = Math.max(1, innerWidth - 4);
+    const truncatedPhase = truncateVisible(phase, phaseNameMaxWidth);
+    const phaseContent = `  ${phaseIcon} ${truncatedPhase}`;
+    const phaseRawLen = 2 + 1 + 1 + strWidth(truncatedPhase); // "  " + icon + " " + name
+    lines.push(padLine(phaseContent, phaseRawLen));
+
+    // Agents in this phase
+    const visibleAgents = agents.slice(-MAX_VISIBLE_AGENTS);
+    for (const agent of visibleAgents) {
+      lines.push(renderAgentLine(agent));
+    }
+    if (agents.length > visibleAgents.length) {
+      const moreText = `    … ${agents.length - visibleAgents.length} earlier`;
+      const moreRawLen = 2 + moreText.length;
+      // 极窄终端下 moreText 可能超过 innerWidth，截断保护
+      if (moreRawLen > innerWidth) {
+        const truncated = truncateVisible(`  ${moreText}`, innerWidth);
+        lines.push(padLine(`${DIM}${truncated}${RST}`, strWidth(truncated)));
+      } else {
+        lines.push(padLine(`  ${DIM}${moreText}${RST}`, moreRawLen));
+      }
+    }
+  }
+
+  // Unphased agents
+  const unphased = snapshot.agents.filter((a) => !rendered.has(a));
+  if (unphased.length) {
+    const visibleAgents = unphased.slice(-MAX_VISIBLE_AGENTS);
+    for (const agent of visibleAgents) {
+      lines.push(renderAgentLine(agent));
+    }
+    if (unphased.length > visibleAgents.length) {
+      const moreText = `    … ${unphased.length - visibleAgents.length} earlier`;
+      const moreRawLen = 2 + moreText.length;
+      if (moreRawLen > innerWidth) {
+        const truncated = truncateVisible(`  ${moreText}`, innerWidth);
+        lines.push(padLine(`${DIM}${truncated}${RST}`, strWidth(truncated)));
+      } else {
+        lines.push(padLine(`  ${DIM}${moreText}${RST}`, moreRawLen));
+      }
+    }
+  }
+
+  lines.push(bottomLine);
+  return lines;
+}
+
+function widgetStatusIcon(status: WorkflowAgentStatus): { icon: string; iconRaw: string } {
+  const GREEN = "\x1b[32m";
+  const CYAN = "\x1b[36m";
+  const RED = "\x1b[31m";
+  const DIM = "\x1b[90m";
+  const RST = "\x1b[0m";
+  switch (status) {
+    case "done":
+      return { icon: `${GREEN}✓${RST}`, iconRaw: "✓" };
+    case "running":
+      return { icon: `${CYAN}●${RST}`, iconRaw: "●" };
+    case "error":
+      return { icon: `${RED}✗${RST}`, iconRaw: "✗" };
+    case "queued":
+      return { icon: `${DIM}○${RST}`, iconRaw: "○" };
+    case "skipped":
+      return { icon: `${DIM}-${RST}`, iconRaw: "-" };
+  }
+}
+
+function computePhaseDuration(agents: WorkflowAgentSnapshot[]): number | undefined {
+  const starts = agents.map((a) => a.startedAt).filter((t): t is number => t != null);
+  const ends = agents.map((a) => a.finishedAt).filter((t): t is number => t != null);
+  if (starts.length === 0 || ends.length === 0) return undefined;
+  const duration = Math.max(...ends) - Math.min(...starts);
+  return duration > 0 ? duration : undefined;
+}
+
+function computeAgentDuration(agent: WorkflowAgentSnapshot): number | undefined {
+  if (!agent.startedAt) return undefined;
+  const end = agent.finishedAt ?? Date.now();
+  const duration = end - agent.startedAt;
+  return duration > 0 ? duration : undefined;
+}