pi-subagents 0.24.4 → 0.27.0

package/src/tui/render.ts

@@ -12,12 +12,16 @@ import {
 	type AsyncJobStep,
 	type AsyncParallelGroupStatus,
 	type Details,
+	type NestedRunSummary,
+	type NestedStepSummary,
+	type WorkflowNodeStatus,
 	MAX_WIDGET_JOBS,
 	WIDGET_KEY,
 } from "../shared/types.ts";
 import { formatTokens, formatUsage, formatDuration, formatModelThinking, formatToolCall, shortenPath } from "../shared/formatters.ts";
 import { getDisplayItems, getSingleResultOutput } from "../shared/utils.ts";
 import { flatToLogicalStepIndex } from "../runs/background/parallel-groups.ts";
+import { formatNestedAggregate } from "../runs/shared/nested-render.ts";
 import { aggregateStepStatus, formatActivityLabel, formatAgentRunningLabel, formatParallelOutcome } from "../shared/status-format.ts";
 
 type Theme = ExtensionContext["ui"]["theme"];
@@ -218,10 +222,21 @@ function firstOutputLine(text: string): string {
 	return text.split("\n").find((line) => line.trim())?.trim() ?? "";
 }
 
+function formatAcceptanceStatus(result: Details["results"][number]): string | undefined {
+	const acceptance = result.acceptance;
+	if (!acceptance?.status || acceptance.status === "not-required") return undefined;
+	const finalization = acceptance.finalization
+		? ` · finalization: ${acceptance.finalization.status} after ${acceptance.finalization.turns.length}/${acceptance.finalization.maxTurns} turns`
+		: "";
+	return `acceptance: ${acceptance.status}${finalization}`;
+}
+
 function resultStatusLine(result: Details["results"][number], output: string): string {
 	if (result.detached) return result.detachedReason ? `Detached: ${result.detachedReason}` : "Detached";
 	if (result.interrupted) return "Paused";
 	if (result.exitCode !== 0) return `Error: ${result.error ?? (firstOutputLine(output) || `exit ${result.exitCode}`)}`;
+	const acceptance = formatAcceptanceStatus(result);
+	if (acceptance) return `Done · ${acceptance}`;
 	if (hasEmptyTextOutputWithoutOutputTarget(result.task, output)) return "Done (no text output)";
 	return "Done";
 }
@@ -257,6 +272,7 @@ export function widgetRenderKey(job: AsyncJobState): string {
 		chainStepCount: job.chainStepCount,
 		parallelGroups: job.parallelGroups,
 		steps: job.steps,
+		nestedChildren: job.nestedChildren,
 		stepsTotal: job.stepsTotal,
 		runningSteps: job.runningSteps,
 		completedSteps: job.completedSteps,
@@ -399,18 +415,21 @@ function widgetChainDetails(job: AsyncJobState, theme: Theme, expanded = false,
 	return lines;
 }
 
-function widgetParallelAgentDetails(job: AsyncJobState, theme: Theme): string[] {
+function widgetParallelAgentDetails(job: AsyncJobState, theme: Theme, expanded = false, width = getTermWidth()): string[] {
 	if (!job.steps?.length) return [];
 	if (job.mode !== "parallel" && job.mode !== "chain") return [];
-	if (job.mode === "chain" && !job.activeParallelGroup && job.parallelGroups?.length) return widgetChainDetails(job, theme);
+	if (job.mode === "chain" && !job.activeParallelGroup && job.parallelGroups?.length) return widgetChainDetails(job, theme, expanded, width);
 	const total = job.stepsTotal ?? job.steps.length;
-	return job.steps.map((step, index) => {
-		const marker = index === job.steps!.length - 1 ? "└" : "├";
+	const lines: string[] = [];
+	for (const [index, step] of job.steps.entries()) {
+		const marker = index === job.steps.length - 1 ? "└" : "├";
 		const activity = widgetStepActivity(step, job.updatedAt);
 		const itemTitle = job.mode === "parallel" || job.activeParallelGroup ? "Agent" : "Step";
 		const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
-		return `  ${theme.fg("dim", `${marker} ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index))} ${itemTitle} ${index + 1}/${total}: ${step.agent} · ${widgetStepStatus(step.status, theme)}${modelDisplay}${activity ? ` · ${activity}` : ""}`)}`;
-	});
+		lines.push(`  ${theme.fg("dim", `${marker} ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index))} ${itemTitle} ${index + 1}/${total}: ${step.agent} · ${widgetStepStatus(step.status, theme)}${modelDisplay}${activity ? ` · ${activity}` : ""}`)}`);
+		for (const nestedLine of formatNestedWidgetLines(step.children, theme, width, expanded, job.updatedAt, expanded ? 8 : 1)) lines.push(`    ${nestedLine}`);
+	}
+	return lines;
 }
 
 function parseParallelGroupAgentCount(label: string | undefined): number | undefined {
@@ -420,26 +439,44 @@ function parseParallelGroupAgentCount(label: string | undefined): number | undef
 	return inner.split("+").map((part) => part.trim()).filter(Boolean).length;
 }
 
-function isChainParallelGroupActive(details: Pick<Details, "mode" | "chainAgents" | "currentStepIndex">): boolean {
-	if (details.mode !== "chain") return false;
-	if (details.currentStepIndex === undefined) return false;
-	const currentLabel = details.chainAgents?.[details.currentStepIndex];
-	return parseParallelGroupAgentCount(currentLabel) !== undefined;
-}
-
 interface ChainStepSpan {
 	stepIndex: number;
 	start: number;
 	count: number;
 	isParallel: boolean;
+	status?: WorkflowNodeStatus;
+	label?: string;
+	error?: string;
 }
 
-function buildChainStepSpans(chainAgents: string[] | undefined): ChainStepSpan[] {
-	if (!chainAgents?.length) return [];
+function buildChainStepSpans(details: Pick<Details, "chainAgents" | "workflowGraph">): ChainStepSpan[] {
+	if (details.workflowGraph?.nodes?.length) {
+		const spans: ChainStepSpan[] = [];
+		let flatCursor = 0;
+		for (const node of details.workflowGraph.nodes) {
+			if (node.stepIndex === undefined) continue;
+			if (node.kind === "parallel-group" || node.kind === "dynamic-parallel-group") {
+				const childFlatIndexes = (node.children ?? [])
+					.map((child) => child.flatIndex)
+					.filter((value): value is number => typeof value === "number");
+				const start = childFlatIndexes.length ? Math.min(...childFlatIndexes) : flatCursor;
+				const count = node.children?.length ?? 0;
+				spans.push({ stepIndex: node.stepIndex, start, count, isParallel: true, status: node.status, label: node.label, error: node.error });
+				flatCursor = Math.max(flatCursor, start + count);
+				continue;
+			}
+			const start = node.flatIndex ?? flatCursor;
+			spans.push({ stepIndex: node.stepIndex, start, count: 1, isParallel: false, status: node.status, label: node.label, error: node.error });
+			flatCursor = Math.max(flatCursor, start + 1);
+		}
+		if (spans.length) return spans.sort((left, right) => left.stepIndex - right.stepIndex);
+	}
+
+	if (!details.chainAgents?.length) return [];
 	const spans: ChainStepSpan[] = [];
 	let start = 0;
-	for (let stepIndex = 0; stepIndex < chainAgents.length; stepIndex++) {
-		const label = chainAgents[stepIndex]!;
+	for (let stepIndex = 0; stepIndex < details.chainAgents.length; stepIndex++) {
+		const label = details.chainAgents[stepIndex]!;
 		const parsedCount = parseParallelGroupAgentCount(label);
 		const count = parsedCount ?? 1;
 		spans.push({ stepIndex, start, count, isParallel: parsedCount !== undefined });
@@ -448,6 +485,12 @@ function buildChainStepSpans(chainAgents: string[] | undefined): ChainStepSpan[]
 	return spans;
 }
 
+function isChainParallelGroupActive(details: Pick<Details, "mode" | "chainAgents" | "currentStepIndex" | "workflowGraph">): boolean {
+	if (details.mode !== "chain") return false;
+	if (details.currentStepIndex === undefined) return false;
+	return buildChainStepSpans(details).some((span) => span.stepIndex === details.currentStepIndex && span.isParallel);
+}
+
 function buildAsyncChainStepSpans(total: number, stepCount: number, parallelGroups: AsyncParallelGroupStatus[] = []): ChainStepSpan[] {
 	const spans: ChainStepSpan[] = [];
 	let flatIndex = 0;
@@ -472,6 +515,55 @@ function isDoneResult(result: Details["results"][number]): boolean {
 	return result.exitCode === 0;
 }
 
+function workflowGraphHasStatus(details: Pick<Details, "workflowGraph">, statuses: WorkflowNodeStatus[]): boolean {
+	return details.workflowGraph?.nodes.some((node) => statuses.includes(node.status)) ?? false;
+}
+
+interface ChainRenderResultEntry {
+	kind: "result";
+	resultIndex: number;
+	rowNumber: number;
+	agentName: string;
+}
+
+interface ChainRenderPlaceholderEntry {
+	kind: "placeholder";
+	rowNumber: number;
+	stepLabel: string;
+	agentName: string;
+	status: WorkflowNodeStatus;
+	error?: string;
+}
+
+type ChainRenderEntry = ChainRenderResultEntry | ChainRenderPlaceholderEntry;
+
+function buildChainRenderEntries(details: Details, label: MultiProgressLabel): ChainRenderEntry[] | undefined {
+	if (details.mode !== "chain" || !label.hasParallelInChain || label.showActiveGroupOnly) return undefined;
+	const entries: ChainRenderEntry[] = [];
+	for (const span of buildChainStepSpans(details)) {
+		if (span.isParallel && span.count === 0) {
+			entries.push({
+				kind: "placeholder",
+				rowNumber: span.stepIndex + 1,
+				stepLabel: `Step ${span.stepIndex + 1}`,
+				agentName: span.label ?? details.chainAgents?.[span.stepIndex] ?? `step-${span.stepIndex + 1}`,
+				status: span.status ?? "pending",
+				error: span.error,
+			});
+			continue;
+		}
+		for (let index = span.start; index < span.start + span.count; index++) {
+			entries.push({
+				kind: "result",
+				resultIndex: index,
+				rowNumber: index + 1,
+				agentName: details.results[index]?.agent ?? details.chainAgents?.[span.stepIndex] ?? `step-${span.stepIndex + 1}`,
+			});
+		}
+	}
+	return entries;
+}
+
 interface MultiProgressLabel {
 	headerLabel: string;
 	itemTitle: "Step" | "Agent";
@@ -483,8 +575,8 @@ interface MultiProgressLabel {
 	showActiveGroupOnly: boolean;
 }
 
-function buildMultiProgressLabel(details: Pick<Details, "mode" | "results" | "progress" | "totalSteps" | "currentStepIndex" | "chainAgents">, hasRunning: boolean): MultiProgressLabel {
-	const stepSpans = buildChainStepSpans(details.chainAgents);
+function buildMultiProgressLabel(details: Pick<Details, "mode" | "results" | "progress" | "totalSteps" | "currentStepIndex" | "chainAgents" | "workflowGraph">, hasRunning: boolean): MultiProgressLabel {
+	const stepSpans = buildChainStepSpans(details);
 	const hasParallelInChain = details.mode === "chain" && stepSpans.some((span) => span.isParallel);
 	const activeParallelGroup = isChainParallelGroupActive(details);
 	const itemTitle: "Step" | "Agent" = details.mode === "parallel" || activeParallelGroup ? "Agent" : "Step";
@@ -548,11 +640,13 @@ function buildMultiProgressLabel(details: Pick<Details, "mode" | "results" | "pr
 	if (details.mode === "chain" && details.chainAgents?.length) {
 		const totalCount = details.totalSteps ?? details.chainAgents.length;
 		const doneLogical = stepSpans.filter((span) => {
+			if (span.status && span.status !== "completed") return false;
+			if (span.count === 0) return span.status === "completed";
 			for (let index = span.start; index < span.start + span.count; index++) {
 				const progressEntry = details.progress?.find((progress) => progress.index === index);
 				const resultEntry = details.results.find((result) => result.progress?.index === index) ?? details.results[index];
-				if (progressEntry?.status === "running" || progressEntry?.status === "pending") return false;
-				if (resultEntry && !isDoneResult(resultEntry)) return false;
+				if (progressEntry?.status === "running" || progressEntry?.status === "pending" || progressEntry?.status === "failed") return false;
+				if (!resultEntry || !isDoneResult(resultEntry)) return false;
 			}
 			return true;
 		}).length;
@@ -568,9 +662,9 @@ function buildMultiProgressLabel(details: Pick<Details, "mode" | "results" | "pr
 	return { headerLabel, itemTitle, totalCount, hasParallelInChain, activeParallelGroup, groupStartIndex: 0, groupEndIndex: details.results.length, showActiveGroupOnly: false };
 }
 
-function resultRowLabel(details: Pick<Details, "mode" | "chainAgents">, label: MultiProgressLabel, resultIndex: number, stepNumber: number): string {
+function resultRowLabel(details: Pick<Details, "mode" | "chainAgents" | "workflowGraph">, label: MultiProgressLabel, resultIndex: number, stepNumber: number): string {
 	if (details.mode === "chain" && label.hasParallelInChain) {
-		const span = buildChainStepSpans(details.chainAgents).find((candidate) => resultIndex >= candidate.start && resultIndex < candidate.start + candidate.count);
+		const span = buildChainStepSpans(details).find((candidate) => resultIndex >= candidate.start && resultIndex < candidate.start + candidate.count);
 		if (span?.isParallel) return `Agent ${resultIndex - span.start + 1}/${span.count}`;
 		if (span) return `Step ${span.stepIndex + 1}`;
 	}
@@ -646,6 +740,84 @@ function widgetOutputPath(job: AsyncJobState, step: NonNullable<AsyncJobState["s
 	return path.join(job.asyncDir, `output-${step.index}.log`);
 }
 
+function nestedRunName(run: NestedRunSummary): string {
+	if (run.agent) return run.agent;
+	if (run.agents?.length) return formatWidgetAgents(run.agents);
+	return run.id;
+}
+
+function nestedStatusGlyph(state: NestedRunSummary["state"] | NestedStepSummary["status"], theme: Theme, seed?: number): string {
+	if (state === "running") return theme.fg("accent", runningGlyph(seed));
+	if (state === "complete" || state === "completed") return theme.fg("success", "✓");
+	if (state === "failed") return theme.fg("error", "✗");
+	if (state === "paused") return theme.fg("warning", "■");
+	return theme.fg("muted", "◦");
+}
+
+function nestedRunSeed(run: NestedRunSummary): number | undefined {
+	return runningSeed(run.lastUpdate, run.lastActivityAt, run.currentStep, run.toolCount, run.turnCount, run.totalTokens?.total, run.currentToolStartedAt);
+}
+
+function nestedActivity(input: Pick<NestedRunSummary | NestedStepSummary, "activityState" | "lastActivityAt" | "currentTool" | "currentToolStartedAt" | "currentPath" | "turnCount" | "toolCount">, state: NestedRunSummary["state"] | NestedStepSummary["status"], snapshotNow?: number): string {
+	const facts: string[] = [];
+	if (input.currentTool && input.currentToolStartedAt !== undefined && snapshotNow !== undefined) facts.push(`${input.currentTool} ${formatDuration(Math.max(0, snapshotNow - input.currentToolStartedAt))}`);
+	else if (input.currentTool) facts.push(input.currentTool);
+	if (input.currentPath) facts.push(shortenPath(input.currentPath));
+	if (input.turnCount !== undefined) facts.push(`${input.turnCount} turns`);
+	if (input.toolCount !== undefined) facts.push(`${input.toolCount} tools`);
+	const activity = buildLiveStatusLine(input, snapshotNow);
+	if (activity && facts.length) return `${activity} · ${facts.join(" · ")}`;
+	if (activity) return activity;
+	if (facts.length) return facts.join(" · ");
+	if (state === "running") return "thinking…";
+	if (state === "queued" || state === "pending") return "queued…";
+	if (state === "paused") return "Paused";
+	if (state === "failed") return "Failed";
+	return "Done";
+}
+
+function formatNestedWidgetLines(children: NestedRunSummary[] | undefined, theme: Theme, width: number, expanded: boolean, snapshotNow?: number, lineBudget = expanded ? 12 : 1): string[] {
+	if (!children?.length || lineBudget <= 0) return [];
+	if (!expanded) {
+		const aggregate = formatNestedAggregate(children);
+		return aggregate ? [theme.fg("dim", `↳ ${aggregate}`)] : [];
+	}
+	const lines: string[] = [];
+	const maxDepth = 2;
+	const append = (items: NestedRunSummary[] | undefined, depth: number, prefix: string): void => {
+		if (!items?.length || lines.length >= lineBudget) return;
+		if (depth > maxDepth) {
+			const aggregate = formatNestedAggregate(items);
+			if (aggregate && lines.length < lineBudget) lines.push(theme.fg("dim", `${prefix}↳ ${aggregate}`));
+			return;
+		}
+		for (let index = 0; index < items.length; index++) {
+			const child = items[index]!;
+			if (lines.length >= lineBudget) {
+				const aggregate = formatNestedAggregate(items.slice(index));
+				if (aggregate) lines[lines.length - 1] = theme.fg("dim", `${prefix}↳ ${aggregate}`);
+				return;
+			}
+			const activity = nestedActivity(child, child.state, snapshotNow ?? child.lastUpdate);
+			const error = child.error ? ` · ${child.error}` : "";
+			lines.push(theme.fg("dim", `${prefix}↳ ${nestedStatusGlyph(child.state, theme, nestedRunSeed(child))} ${nestedRunName(child)} · ${child.state} · ${activity}${error}`));
+			if (depth === maxDepth) {
+				const aggregate = formatNestedAggregate([...(child.steps?.flatMap((step) => step.children ?? []) ?? []), ...(child.children ?? [])]);
+				if (aggregate && lines.length < lineBudget) lines.push(theme.fg("dim", `${prefix}  ↳ ${aggregate}`));
+				continue;
+			}
+			for (const step of child.steps ?? []) {
+				if (lines.length >= lineBudget) return;
+				lines.push(theme.fg("dim", `${prefix}  ↳ ${nestedStatusGlyph(step.status, theme)} ${step.agent} · ${step.status} · ${nestedActivity(step, step.status, snapshotNow ?? child.lastUpdate)}`));
+				append(step.children, depth + 1, `${prefix}    `);
+			}
+			append(child.children, depth + 1, `${prefix}  `);
+		}
+	};
+	append(children, 0, "");
+	return lines.map((line) => truncLine(line, width));
+}
+
 function foregroundStyleWidgetStepLines(
 	job: AsyncJobState,
 	theme: Theme,
@@ -662,6 +834,9 @@ function foregroundStyleWidgetStepLines(
 	const lines = [`  ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index - 1))} ${itemTitle} ${index}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`];
 	const activity = widgetStepActivityLine(step, width, expanded, job.updatedAt);
 	if (activity) lines.push(`    ${theme.fg("dim", `⎿  ${activity}`)}`);
+	for (const nestedLine of formatNestedWidgetLines(step.children, theme, width, expanded, job.updatedAt)) {
+		lines.push(`    ${nestedLine}`);
+	}
 	if (step.status === "running") {
 		if (!expanded) lines.push(`    ${theme.fg("accent", "Press Ctrl+O for live detail")}`);
 		const output = widgetOutputPath(job, step);
@@ -683,7 +858,10 @@ function foregroundStyleWidgetStepLines(
 }
 
 function foregroundStyleWidgetDetails(job: AsyncJobState, theme: Theme, expanded: boolean, width: number): string[] {
-	if (!job.steps?.length) return [`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`];
+	if (!job.steps?.length) return [
+		`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`,
+		...formatNestedWidgetLines(job.nestedChildren, theme, width, expanded, job.updatedAt).map((line) => `  ${line}`),
+	];
 	if (job.mode === "chain" && !job.activeParallelGroup && job.parallelGroups?.length) return widgetChainDetails(job, theme, expanded, width);
 	const total = job.stepsTotal ?? job.steps.length;
 	const itemTitle = job.mode === "parallel" || job.activeParallelGroup ? "Agent" : "Step";
@@ -691,6 +869,11 @@ function foregroundStyleWidgetDetails(job: AsyncJobState, theme: Theme, expanded
 	for (const [index, step] of job.steps.entries()) {
 		lines.push(...foregroundStyleWidgetStepLines(job, theme, step, itemTitle, index + 1, total, expanded, width));
 	}
+	const attached = new Set(job.steps.flatMap((step) => step.children?.map((child) => child.id) ?? []));
+	const unattached = job.nestedChildren?.filter((child) => !attached.has(child.id)) ?? [];
+	for (const nestedLine of formatNestedWidgetLines(unattached, theme, width, expanded, job.updatedAt)) {
+		lines.push(`  ${nestedLine}`);
+	}
 	return lines;
 }
 
@@ -720,6 +903,7 @@ function compactSingleWidgetLines(job: AsyncJobState, theme: Theme, width: numbe
 		const activitySuffix = activity ? ` ${theme.fg("dim", "·")} ${theme.fg("dim", activity)}` : "";
 		const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking);
 		lines.push(`  ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index))} ${itemTitle} ${index + 1}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${activitySuffix}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}`);
+		for (const nestedLine of formatNestedWidgetLines(step.children, theme, width, false, job.updatedAt)) lines.push(`    ${nestedLine}`);
 	}
 	if (job.steps.some((step) => step.status === "running")) lines.push(theme.fg("accent", "  Press Ctrl+O for live detail"));
 	return lines.map((line) => truncLine(line, width));
@@ -777,7 +961,7 @@ export function buildWidgetLines(jobs: AsyncJobState[], theme: Theme, width = ge
 		items.push([
 			`${widgetStatusGlyph(job, theme)} ${themeBold(theme, widgetJobName(job))}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`,
 			`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`,
-			...widgetParallelAgentDetails(job, theme),
+			...widgetParallelAgentDetails(job, theme, expanded, width),
 		]);
 		slots--;
 	}
@@ -794,7 +978,7 @@ export function buildWidgetLines(jobs: AsyncJobState[], theme: Theme, width = ge
 		items.push([
 			`${widgetStatusGlyph(job, theme)} ${themeBold(theme, widgetJobName(job))}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`,
 			`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`,
-			...widgetParallelAgentDetails(job, theme),
+			...widgetParallelAgentDetails(job, theme, expanded, width),
 		]);
 		slots--;
 	}
@@ -841,7 +1025,7 @@ function renderSingleCompact(d: Details, r: Details["results"][number], theme: T
 	const isRunning = r.progress?.status === "running";
 	const contextBadge = d.context === "fork" ? theme.fg("warning", " [fork]") : "";
 	const stats = statJoin(theme, [
-		r.usage?.turns ? `⟳${r.usage.turns}` : "",
+		r.usage?.turns ? `⟳ ${r.usage.turns}` : "",
 		formatProgressStats(theme, progress),
 	]);
 	const c = new Container();
@@ -873,9 +1057,12 @@ function renderSingleCompact(d: Details, r: Details["results"][number], theme: T
 
 function renderMultiCompact(d: Details, theme: Theme): Component {
 	const hasRunning = d.progress?.some((p) => p.status === "running")
-		|| d.results.some((r) => r.progress?.status === "running");
-	const failed = d.results.some((r) => r.exitCode !== 0 && r.progress?.status !== "running");
-	const paused = d.results.some((r) => (r.interrupted || r.detached) && r.progress?.status !== "running");
+		|| d.results.some((r) => r.progress?.status === "running")
+		|| workflowGraphHasStatus(d, ["running"]);
+	const failed = d.results.some((r) => r.exitCode !== 0 && r.progress?.status !== "running")
+		|| workflowGraphHasStatus(d, ["failed"]);
+	const paused = d.results.some((r) => (r.interrupted || r.detached) && r.progress?.status !== "running")
+		|| workflowGraphHasStatus(d, ["paused", "detached"]);
 	let totalSummary = d.progressSummary;
 	if (!totalSummary) {
 		let sawProgress = false;
@@ -908,13 +1095,29 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
 	const useResultsDirectly = multiLabel.hasParallelInChain || !d.chainAgents?.length;
 	const displayStart = multiLabel.showActiveGroupOnly ? multiLabel.groupStartIndex : 0;
 	const displayEnd = multiLabel.showActiveGroupOnly ? multiLabel.groupEndIndex : (useResultsDirectly ? d.results.length : d.chainAgents!.length);
-	for (let i = displayStart; i < displayEnd; i++) {
+	const chainEntries = buildChainRenderEntries(d, multiLabel);
+	const renderEntries = chainEntries ?? Array.from({ length: displayEnd - displayStart }, (_, offset): ChainRenderEntry => {
+		const i = displayStart + offset;
 		const r = d.results[i];
 		const fallbackLabel = itemTitle.toLowerCase();
 		const rowNumber = multiLabel.showActiveGroupOnly ? (i - multiLabel.groupStartIndex + 1) : (i + 1);
-		const agentName = useResultsDirectly ? (r?.agent || `${fallbackLabel}-${rowNumber}`) : (d.chainAgents![i] || r?.agent || `${fallbackLabel}-${rowNumber}`);
+		return { kind: "result", resultIndex: i, rowNumber, agentName: useResultsDirectly ? (r?.agent || `${fallbackLabel}-${rowNumber}`) : (d.chainAgents![i] || r?.agent || `${fallbackLabel}-${rowNumber}`) };
+	});
+	for (const entry of renderEntries) {
+		if (entry.kind === "placeholder") {
+			const glyph = widgetStepGlyph(entry.status as AsyncJobStep["status"], theme);
+			const statusLabel = widgetStepStatus(entry.status as AsyncJobStep["status"], theme);
+			c.addChild(new Text(truncLine(`  ${glyph} ${entry.stepLabel}: ${themeBold(theme, entry.agentName)} ${theme.fg("dim", "·")} ${statusLabel}`, width), 0, 0));
+			if (entry.error) c.addChild(new Text(truncLine(theme.fg("error", `    ⎿  Error: ${entry.error}`), width), 0, 0));
+			continue;
+		}
+		const i = entry.resultIndex;
+		const r = d.results[i];
+		const rowNumber = entry.rowNumber;
+		const agentName = entry.agentName;
 		if (!r) {
-			c.addChild(new Text(truncLine(theme.fg("dim", `  ◦ ${itemTitle} ${rowNumber}: ${agentName} · pending`), width), 0, 0));
+			const pendingLabel = chainEntries ? resultRowLabel(d, multiLabel, i, rowNumber) : `${itemTitle} ${rowNumber}`;
+			c.addChild(new Text(truncLine(theme.fg("dim", `  ◦ ${pendingLabel}: ${agentName} · pending`), width), 0, 0));
 			continue;
 		}
 		const output = getSingleResultOutput(r);
@@ -1062,20 +1265,27 @@ export function renderSubagentResult(
 	if (!expanded) return renderMultiCompact(d, theme);
 
 	const hasRunning = d.progress?.some((p) => p.status === "running") 
-		|| d.results.some((r) => r.progress?.status === "running");
+		|| d.results.some((r) => r.progress?.status === "running")
+		|| workflowGraphHasStatus(d, ["running"]);
 	const ok = d.results.filter((r) => r.progress?.status === "completed" || (r.exitCode === 0 && r.progress?.status !== "running")).length;
 	const hasEmptyWithoutTarget = d.results.some((r) =>
 		r.exitCode === 0
 		&& r.progress?.status !== "running"
 		&& hasEmptyTextOutputWithoutOutputTarget(r.task, getSingleResultOutput(r)),
 	);
+	const hasWorkflowFailure = workflowGraphHasStatus(d, ["failed"]);
+	const hasWorkflowPause = workflowGraphHasStatus(d, ["paused", "detached"]);
 	const icon = hasRunning
 		? theme.fg("warning", "running")
 		: hasEmptyWithoutTarget
 			? theme.fg("warning", "warning")
-			: ok === d.results.length
-				? theme.fg("success", "ok")
-				: theme.fg("error", "failed");
+			: hasWorkflowFailure
+				? theme.fg("error", "failed")
+				: hasWorkflowPause
+					? theme.fg("warning", "paused")
+					: ok === d.results.length
+						? theme.fg("success", "ok")
+						: theme.fg("error", "failed");
 
 	const totalSummary =
 		d.progressSummary ||
@@ -1146,18 +1356,33 @@ export function renderSubagentResult(
 	const useResultsDirectly = multiLabel.hasParallelInChain || !d.chainAgents?.length;
 	const displayStart = multiLabel.showActiveGroupOnly ? multiLabel.groupStartIndex : 0;
 	const displayEnd = multiLabel.showActiveGroupOnly ? multiLabel.groupEndIndex : (useResultsDirectly ? d.results.length : d.chainAgents!.length);
+	const chainEntries = buildChainRenderEntries(d, multiLabel);
+	const renderEntries = chainEntries ?? Array.from({ length: displayEnd - displayStart }, (_, offset): ChainRenderEntry => {
+		const i = displayStart + offset;
+		const r = d.results[i];
+		const rowNumber = multiLabel.showActiveGroupOnly ? (i - multiLabel.groupStartIndex + 1) : (i + 1);
+		return { kind: "result", resultIndex: i, rowNumber, agentName: useResultsDirectly ? (r?.agent || `step-${rowNumber}`) : (d.chainAgents![i] || r?.agent || `step-${rowNumber}`) };
+	});
 
 	c.addChild(new Spacer(1));
 
-	for (let i = displayStart; i < displayEnd; i++) {
+	for (const entry of renderEntries) {
+		if (entry.kind === "placeholder") {
+			const statusLabel = widgetStepStatus(entry.status as AsyncJobStep["status"], theme);
+			c.addChild(new Text(fit(`  ${statusLabel} ${entry.stepLabel}: ${theme.bold(entry.agentName)}`), 0, 0));
+			c.addChild(new Text(theme.fg(entry.status === "failed" ? "error" : "dim", `    status: ${entry.status}`), 0, 0));
+			if (entry.error) c.addChild(new Text(theme.fg("error", `    error: ${entry.error}`), 0, 0));
+			c.addChild(new Spacer(1));
+			continue;
+		}
+		const i = entry.resultIndex;
 		const r = d.results[i];
-		const rowNumber = multiLabel.showActiveGroupOnly ? (i - multiLabel.groupStartIndex + 1) : (i + 1);
-		const agentName = useResultsDirectly 
-			? (r?.agent || `step-${rowNumber}`)
-			: (d.chainAgents![i] || r?.agent || `step-${rowNumber}`);
+		const rowNumber = entry.rowNumber;
+		const agentName = entry.agentName;
 
 		if (!r) {
-			c.addChild(new Text(fit(theme.fg("dim", `  ${itemTitle} ${rowNumber}: ${agentName}`)), 0, 0));
+			const pendingLabel = chainEntries ? resultRowLabel(d, multiLabel, i, rowNumber) : `${itemTitle} ${rowNumber}`;
+			c.addChild(new Text(fit(theme.fg("dim", `  ${pendingLabel}: ${agentName}`)), 0, 0));
 			c.addChild(new Text(theme.fg("dim", `    status: pending`), 0, 0));
 			c.addChild(new Spacer(1));
 			continue;