pi-crew 0.2.2 → 0.2.4

package/src/ui/dashboard-panes/agents-pane.ts

@@ -1,28 +1,109 @@
-import type { RunDashboardOptions } from "../run-dashboard.ts";
-import { iconForStatus } from "../status-colors.ts";
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-import { spinnerFrame } from "../spinner.ts";
-
-function tokens(agent: RunUiSnapshot["agents"][number]): string {
-	const total = (agent.usage?.input ?? 0) + (agent.usage?.output ?? agent.progress?.tokens ?? 0) + (agent.usage?.cacheRead ?? 0) + (agent.usage?.cacheWrite ?? 0);
-	return total ? `${total} tok` : "tok pending";
-}
-
-export function renderAgentsPane(snapshot: RunUiSnapshot | undefined, options: RunDashboardOptions = {}): string[] {
-	if (!snapshot) return ["Agents pane: snapshot unavailable"];
-	if (!snapshot.agents.length) return ["Agents pane: no agents"];
-	return [
-		`Agents pane: ${snapshot.agents.length} agents · ${snapshot.progress.completed}/${snapshot.progress.total} tasks done`,
-		...snapshot.agents.slice(0, 12).map((agent) => {
-			const parts = [
-				agent.status,
-				options.showTools !== false && agent.progress?.currentTool ? `tool=${agent.progress.currentTool}` : undefined,
-				options.showTools !== false ? `${agent.toolUses ?? agent.progress?.toolCount ?? 0} tools` : undefined,
-				options.showTokens !== false ? tokens(agent) : undefined,
-				options.showModel !== false ? (agent.model ? `model=${agent.model}` : undefined) : undefined,
-			].filter((part): part is string => Boolean(part));
-			const icon = iconForStatus(agent.status, { runningGlyph: spinnerFrame(agent.taskId) });
-			return `${icon} ${agent.taskId} ${agent.role}->${agent.agent} · ${parts.join(" · ")}`;
-		}),
-	];
-}
+import type { RunDashboardOptions } from "../run-dashboard.ts";
+import { iconForStatus } from "../status-colors.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+import { spinnerFrame } from "../spinner.ts";
+import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
+import { listLiveAgents, type LiveAgentHandle } from "../../runtime/live-agent-manager.ts";
+
+/**
+ * Returns true if this agent did real work (LLM call, tool use, or non-trivial duration).
+ * Scaffold-only agents (no tokens, no tools, no turns) are skipped in the agents pane —
+ * they represent pipeline infrastructure steps, not actual agent execution.
+ */
+function isRealAgent(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle): boolean {
+	if (agent.runtime === "live-session" || agent.runtime === "child-process") return true;
+	// Scaffold agents with real work done are still worth showing
+	const tokens = (agent.usage?.input ?? 0) + (agent.usage?.output ?? 0) + (agent.usage?.cacheRead ?? 0) + (agent.usage?.cacheWrite ?? 0);
+	if (tokens > 0) return true;
+	const turns = (agent.usage as { turns?: number } | undefined)?.turns;
+	if (turns != null && turns > 0) return true;
+	if ((agent.progress?.toolCount ?? 0) > 0) return true;
+	// If it's still running and has been alive for > 30s, it might be real
+	if (liveHandle) {
+		const ms = Date.now() - liveHandle.activity.startedAtMs;
+		if (ms > 30_000) return true;
+	}
+	return false;
+}
+
+const TOOL_LABELS: Record<string, string> = {
+	read: "reading",
+	bash: "cmd",
+	edit: "editing",
+	write: "writing",
+	grep: "searching",
+	find: "finding",
+	ls: "listing",
+};
+
+function describeActivity(handle: LiveAgentHandle): string {
+	const act = handle.activity;
+	if (act.activeTools.size > 0) {
+		const tools = [...new Set([...act.activeTools.values()])].map(t => TOOL_LABELS[t] ?? t);
+		return tools.join(", ") + "…";
+	}
+	if (act.responseText?.trim()) {
+		const line = act.responseText.split("\n").find((l) => l.trim())?.trim() ?? "";
+		return line.length > 40 ? line.slice(0, 40) + "…" : line;
+	}
+	return "thinking…";
+}
+
+export function renderAgentsPane(snapshot: RunUiSnapshot | undefined, options: RunDashboardOptions = {}): string[] {
+	if (!snapshot) return ["(snapshot unavailable)"];
+	if (!snapshot.agents.length) return ["(no agents)"];
+	const liveForRun = listLiveAgents().filter(h => h.runId === snapshot.runId);
+	const { completed, total } = snapshot.progress;
+
+	const lines: string[] = [];
+
+	const realAgents = snapshot.agents.filter(a => isRealAgent(a, liveForRun.find(h => h.taskId === a.taskId)));
+	const lineCount = Math.min(realAgents.length, 12);
+	const label = realAgents.length !== snapshot.agents.length
+		? `${realAgents.length} real agents (${snapshot.agents.length} total)`
+		: `${realAgents.length} agents`;
+
+	lines.push(`${completed}/${total} tasks · ${label}`);
+
+	for (const agent of realAgents.slice(0, 12)) {
+		const liveHandle = liveForRun.find(h => h.taskId === agent.taskId);
+		const icon = iconForStatus(agent.status, { runningGlyph: spinnerFrame(agent.taskId) });
+		const role = `${agent.role}`;
+
+		// Compact activity line
+		const activity = liveHandle ? describeActivity(liveHandle)
+			: agent.progress?.currentTool ? `${TOOL_LABELS[agent.progress.currentTool] ?? agent.progress.currentTool}…`
+			: agent.status === "running" ? "thinking…"
+			: agent.status === "queued" ? "queued"
+			: agent.status === "failed" ? (agent.error ?? "failed")
+			: "done";
+
+		// Stats: tokens + duration only
+		const stats: string[] = [];
+		const tokenTotal = (agent.usage?.input ?? 0) + (agent.usage?.output ?? 0) + (agent.usage?.cacheRead ?? 0) + (agent.usage?.cacheWrite ?? 0);
+		if (tokenTotal > 0) {
+			const tok = tokenTotal >= 1000 ? `${(tokenTotal / 1000).toFixed(1)}k` : `${tokenTotal}`;
+			stats.push(tok);
+		}
+		if (liveHandle) {
+			const ms = (liveHandle.activity.completedAtMs ?? Date.now()) - liveHandle.activity.startedAtMs;
+			stats.push(`${(ms / 1000).toFixed(1)}s`);
+			if (options.showModel !== false && liveHandle.modelName && liveHandle.modelName !== "default") {
+				stats.push(liveHandle.modelName);
+			}
+		} else if (agent.startedAt) {
+			const ms = Date.now() - new Date(agent.startedAt).getTime();
+			if (Number.isFinite(ms)) stats.push(`${(ms / 1000).toFixed(1)}s`);
+		}
+
+		const statsStr = stats.length ? ` · ${stats.join(" ")}` : "";
+		lines.push(`  ${icon} ${agent.taskId} ${role}${statsStr}`);
+		lines.push(`    ${activity}`);
+	}
+
+	if (snapshot.agents.length > 12) {
+		lines.push(`  … +${snapshot.agents.length - 12} more`);
+	}
+
+	return lines;
+}

package/src/ui/dashboard-panes/cancellation-pane.ts

@@ -1,43 +1,43 @@
-import type { TeamRunManifest, TeamTaskState } from "../../state/types.ts";
-
-export interface CancellationPaneOptions {
-	maxReasons?: number;
-}
-
-export function renderCancellationPane(manifest: TeamRunManifest, tasks: TeamTaskState[], opts: CancellationPaneOptions = {}): string[] {
-	const maxReasons = opts.maxReasons ?? 5;
-	if (manifest.status !== "cancelled" && manifest.status !== "blocked") {
-		const cancellingTasks = tasks.filter((t) => t.status === "cancelled");
-		if (cancellingTasks.length === 0) return ["Cancellation pane: no active cancellations"];
-	}
-
-	const lines: string[] = ["Cancellation pane"];
-
-	if (manifest.status === "cancelled") {
-		lines.push(`  Run status: cancelled`);
-	} else if (manifest.status === "blocked") {
-		lines.push(`  Run status: blocked`);
-	}
-
-	const cancelledTasks = tasks.filter((t) => t.status === "cancelled");
-	if (cancelledTasks.length > 0) {
-		lines.push(`  Cancelled tasks (${cancelledTasks.length}):`);
-		for (const task of cancelledTasks.slice(0, maxReasons)) {
-			const reason = task.error ?? "unknown";
-			lines.push(`    ✗ ${task.id}: ${reason}`);
-		}
-		if (cancelledTasks.length > maxReasons) {
-			lines.push(`    ... and ${cancelledTasks.length - maxReasons} more`);
-		}
-	}
-
-	if (manifest.policyDecisions?.length) {
-		const decisions = manifest.policyDecisions.slice(0, maxReasons);
-		lines.push(`  Policy decisions (${manifest.policyDecisions.length}):`);
-		for (const d of decisions) {
-			lines.push(`    ${d.action}: ${d.message}`);
-		}
-	}
-
-	return lines;
+import type { TeamRunManifest, TeamTaskState } from "../../state/types.ts";
+
+export interface CancellationPaneOptions {
+	maxReasons?: number;
+}
+
+export function renderCancellationPane(manifest: TeamRunManifest, tasks: TeamTaskState[], opts: CancellationPaneOptions = {}): string[] {
+	const maxReasons = opts.maxReasons ?? 5;
+	if (manifest.status !== "cancelled" && manifest.status !== "blocked") {
+		const cancellingTasks = tasks.filter((t) => t.status === "cancelled");
+		if (cancellingTasks.length === 0) return ["Cancellation pane: no active cancellations"];
+	}
+
+	const lines: string[] = ["Cancellation pane"];
+
+	if (manifest.status === "cancelled") {
+		lines.push(`  Run status: cancelled`);
+	} else if (manifest.status === "blocked") {
+		lines.push(`  Run status: blocked`);
+	}
+
+	const cancelledTasks = tasks.filter((t) => t.status === "cancelled");
+	if (cancelledTasks.length > 0) {
+		lines.push(`  Cancelled tasks (${cancelledTasks.length}):`);
+		for (const task of cancelledTasks.slice(0, maxReasons)) {
+			const reason = task.error ?? "unknown";
+			lines.push(`    ✗ ${task.id}: ${reason}`);
+		}
+		if (cancelledTasks.length > maxReasons) {
+			lines.push(`    ... and ${cancelledTasks.length - maxReasons} more`);
+		}
+	}
+
+	if (manifest.policyDecisions?.length) {
+		const decisions = manifest.policyDecisions.slice(0, maxReasons);
+		lines.push(`  Policy decisions (${manifest.policyDecisions.length}):`);
+		for (const d of decisions) {
+			lines.push(`    ${d.action}: ${d.message}`);
+		}
+	}
+
+	return lines;
 }

package/src/ui/dashboard-panes/capability-pane.ts

@@ -1,60 +1,60 @@
-import { buildCapabilityInventory } from "../../runtime/capability-inventory.ts";
-import type { PiTeamsConfig } from "../../config/config.ts";
-import type { CapabilityItem } from "../../runtime/capability-inventory.ts";
-
-export interface CapabilityPaneOptions {
-	config?: PiTeamsConfig;
-	filter?: string;
-}
-
-function kindIcon(kind: string): string {
-	switch (kind) {
-		case "team": return "👥";
-		case "workflow": return "📋";
-		case "agent": return "🤖";
-		case "skill": return "🔧";
-		case "tool": return "🛠";
-		case "runtime": return "⚙";
-		default: return "•";
-	}
-}
-
-function stateLabel(state: string): string {
-	switch (state) {
-		case "active": return "";
-		case "disabled": return " [DISABLED]";
-		case "shadowed": return " [SHADOWED]";
-		case "missing": return " [MISSING]";
-		default: return "";
-	}
-}
-
-export function renderCapabilityPane(cwd: string, opts: CapabilityPaneOptions = {}): string[] {
-	const inventory = buildCapabilityInventory(cwd, opts.config);
-	const filtered = opts.filter
-		? inventory.filter((item) => item.kind.includes(opts.filter!.toLowerCase()) || item.name.toLowerCase().includes(opts.filter!.toLowerCase()) || item.id.toLowerCase().includes(opts.filter!.toLowerCase()))
-		: inventory;
-
-	if (filtered.length === 0) return ["Capability pane: no items found"];
-
-	const byKind = new Map<string, CapabilityItem[]>();
-	for (const item of filtered) {
-		const group = byKind.get(item.kind) ?? [];
-		group.push(item);
-		byKind.set(item.kind, group);
-	}
-
-	const lines = [`Capability pane: ${filtered.length} item(s) (filter: ${opts.filter ?? "none"})`];
-	for (const [kind, items] of byKind) {
-		lines.push(`  ${kindIcon(kind)} ${kind} (${items.length}):`);
-		for (const item of items.slice(0, 10)) {
-			const icon = item.state === "active" ? "✓" : "✗";
-			lines.push(`    ${icon} ${item.name}${stateLabel(item.state)} [${item.source}]`);
-		}
-		if (items.length > 10) lines.push(`    ... and ${items.length - 10} more`);
-	}
-
-	const disabled = filtered.filter((i) => i.state === "disabled").length;
-	if (disabled > 0) lines.push(`  Disabled: ${disabled}`);
-	return lines;
+import { buildCapabilityInventory } from "../../runtime/capability-inventory.ts";
+import type { PiTeamsConfig } from "../../config/config.ts";
+import type { CapabilityItem } from "../../runtime/capability-inventory.ts";
+
+export interface CapabilityPaneOptions {
+	config?: PiTeamsConfig;
+	filter?: string;
+}
+
+function kindIcon(kind: string): string {
+	switch (kind) {
+		case "team": return "👥";
+		case "workflow": return "📋";
+		case "agent": return "🤖";
+		case "skill": return "🔧";
+		case "tool": return "🛠";
+		case "runtime": return "⚙";
+		default: return "•";
+	}
+}
+
+function stateLabel(state: string): string {
+	switch (state) {
+		case "active": return "";
+		case "disabled": return " [DISABLED]";
+		case "shadowed": return " [SHADOWED]";
+		case "missing": return " [MISSING]";
+		default: return "";
+	}
+}
+
+export function renderCapabilityPane(cwd: string, opts: CapabilityPaneOptions = {}): string[] {
+	const inventory = buildCapabilityInventory(cwd, opts.config);
+	const filtered = opts.filter
+		? inventory.filter((item) => item.kind.includes(opts.filter!.toLowerCase()) || item.name.toLowerCase().includes(opts.filter!.toLowerCase()) || item.id.toLowerCase().includes(opts.filter!.toLowerCase()))
+		: inventory;
+
+	if (filtered.length === 0) return ["Capability pane: no items found"];
+
+	const byKind = new Map<string, CapabilityItem[]>();
+	for (const item of filtered) {
+		const group = byKind.get(item.kind) ?? [];
+		group.push(item);
+		byKind.set(item.kind, group);
+	}
+
+	const lines = [`Capability pane: ${filtered.length} item(s) (filter: ${opts.filter ?? "none"})`];
+	for (const [kind, items] of byKind) {
+		lines.push(`  ${kindIcon(kind)} ${kind} (${items.length}):`);
+		for (const item of items.slice(0, 10)) {
+			const icon = item.state === "active" ? "✓" : "✗";
+			lines.push(`    ${icon} ${item.name}${stateLabel(item.state)} [${item.source}]`);
+		}
+		if (items.length > 10) lines.push(`    ... and ${items.length - 10} more`);
+	}
+
+	const disabled = filtered.filter((i) => i.state === "disabled").length;
+	if (disabled > 0) lines.push(`  Disabled: ${disabled}`);
+	return lines;
 }

package/src/ui/dashboard-panes/health-pane.ts

@@ -1,30 +1,30 @@
-import { summarizeHeartbeats } from "../heartbeat-aggregator.ts";
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export interface HealthPaneOptions {
-	staleMs?: number;
-	deadMs?: number;
-	isForeground?: boolean;
-	now?: number | Date;
-}
-
-function seconds(ms: number): string {
-	return `${Math.round(ms / 1000)}s`;
-}
-
-export function renderHealthPane(snapshot: RunUiSnapshot | undefined, opts: HealthPaneOptions = {}): string[] {
-	if (!snapshot) return ["Health pane: snapshot unavailable"];
-	const summary = summarizeHeartbeats(snapshot, opts);
-	const lines = [
-		`Health pane: ${summary.healthy}/${summary.totalTasks} healthy · stale=${summary.stale} · dead=${summary.dead} · missing=${summary.missing}`,
-	];
-	if (summary.worstStaleMs > 0) lines.push(`Worst stale: ${seconds(summary.worstStaleMs)} ago`);
-	const hints: string[] = [];
-	const foreground = opts.isForeground !== false;
-	if ((summary.dead > 0 || summary.missing > 0) && foreground) hints.push("R recovery");
-	if ((summary.dead > 0 || summary.stale > 0) && foreground) hints.push("K kill stale");
-	hints.push("D diagnostic export");
-	lines.push(`Actions: ${hints.join(" · ")}`);
-	if (!foreground && (summary.dead > 0 || summary.missing > 0 || summary.stale > 0)) lines.push("Async run: R/K disabled — inspect process manually or use /team-api.");
-	return lines;
-}
+import { summarizeHeartbeats } from "../heartbeat-aggregator.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export interface HealthPaneOptions {
+	staleMs?: number;
+	deadMs?: number;
+	isForeground?: boolean;
+	now?: number | Date;
+}
+
+function seconds(ms: number): string {
+	return `${Math.round(ms / 1000)}s`;
+}
+
+export function renderHealthPane(snapshot: RunUiSnapshot | undefined, opts: HealthPaneOptions = {}): string[] {
+	if (!snapshot) return ["Health pane: snapshot unavailable"];
+	const summary = summarizeHeartbeats(snapshot, opts);
+	const lines = [
+		`Health pane: ${summary.healthy}/${summary.totalTasks} healthy · stale=${summary.stale} · dead=${summary.dead} · missing=${summary.missing}`,
+	];
+	if (summary.worstStaleMs > 0) lines.push(`Worst stale: ${seconds(summary.worstStaleMs)} ago`);
+	const hints: string[] = [];
+	const foreground = opts.isForeground !== false;
+	if ((summary.dead > 0 || summary.missing > 0) && foreground) hints.push("R recovery");
+	if ((summary.dead > 0 || summary.stale > 0) && foreground) hints.push("K kill stale");
+	hints.push("D diagnostic export");
+	lines.push(`Actions: ${hints.join(" · ")}`);
+	if (!foreground && (summary.dead > 0 || summary.missing > 0 || summary.stale > 0)) lines.push("Async run: R/K disabled — inspect process manually or use /team-api.");
+	return lines;
+}

package/src/ui/dashboard-panes/mailbox-pane.ts

@@ -1,35 +1,35 @@
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export function renderMailboxPane(snapshot: RunUiSnapshot | undefined): string[] {
-	if (!snapshot) return ["Mailbox pane: snapshot unavailable"];
-	const mailbox = snapshot.mailbox;
-	const approx = mailbox.approximate ? " · approximate (tail)" : "";
-	const lines: string[] = [
-		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}${approx}`,
-	];
-	// Kind-separated breakdown
-	const kindParts: string[] = [];
-	const steer = mailbox.steerUnread ?? 0;
-	const followUp = mailbox.followUpUnread ?? 0;
-	const response = mailbox.responseUnread ?? 0;
-	const message = mailbox.messageUnread ?? 0;
-	if (steer > 0) kindParts.push(`steer=${steer}`);
-	if (followUp > 0) kindParts.push(`follow-up=${followUp}`);
-	if (response > 0) kindParts.push(`response=${response}`);
-	if (message > 0) kindParts.push(`message=${message}`);
-	if (kindParts.length > 0) {
-		lines.push(`  Breakdown: ${kindParts.join(" · ")}`);
-		if (steer > 0) {
-			lines.push("  ⚠ Urgent: steering messages require immediate attention.");
-		}
-		if (followUp > 0) {
-			lines.push(`  📋 ${followUp} follow-up(s) pending review.`);
-		}
-	}
-	if (mailbox.needsAttention > 0) {
-		lines.push("Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all.");
-	} else {
-		lines.push("No mailbox items need attention. Press Enter for detail or C compose.");
-	}
-	return lines;
-}
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export function renderMailboxPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Mailbox pane: snapshot unavailable"];
+	const mailbox = snapshot.mailbox;
+	const approx = mailbox.approximate ? " · approximate (tail)" : "";
+	const lines: string[] = [
+		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}${approx}`,
+	];
+	// Kind-separated breakdown
+	const kindParts: string[] = [];
+	const steer = mailbox.steerUnread ?? 0;
+	const followUp = mailbox.followUpUnread ?? 0;
+	const response = mailbox.responseUnread ?? 0;
+	const message = mailbox.messageUnread ?? 0;
+	if (steer > 0) kindParts.push(`steer=${steer}`);
+	if (followUp > 0) kindParts.push(`follow-up=${followUp}`);
+	if (response > 0) kindParts.push(`response=${response}`);
+	if (message > 0) kindParts.push(`message=${message}`);
+	if (kindParts.length > 0) {
+		lines.push(`  Breakdown: ${kindParts.join(" · ")}`);
+		if (steer > 0) {
+			lines.push("  ⚠ Urgent: steering messages require immediate attention.");
+		}
+		if (followUp > 0) {
+			lines.push(`  📋 ${followUp} follow-up(s) pending review.`);
+		}
+	}
+	if (mailbox.needsAttention > 0) {
+		lines.push("Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all.");
+	} else {
+		lines.push("No mailbox items need attention. Press Enter for detail or C compose.");
+	}
+	return lines;
+}

package/src/ui/dashboard-panes/progress-pane.ts

@@ -1,30 +1,30 @@
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-import { computePhaseProgress, formatPhaseProgressLine } from "../../runtime/phase-progress.ts";
-
-export function renderProgressPane(snapshot: RunUiSnapshot | undefined): string[] {
-	if (!snapshot) return ["Progress pane: snapshot unavailable"];
-	const progress = snapshot.progress;
-	const groupJoins = snapshot.groupJoins ?? [];
-	const groupJoinLines = groupJoins.length ? groupJoins.map((item) => `group join ${item.partial ? "partial" : "completed"}: ${item.requestId} ack=${item.ack}`) : ["group joins: none"];
-	const cancellationLine = snapshot.cancellationReason ? [`cancelled: reason=${snapshot.cancellationReason}`] : [];
-	const runProgress = computePhaseProgress(snapshot.tasks);
-	const phaseLines = runProgress.phases.length > 0
-		? runProgress.phases.map((p) => {
-			const done = p.completed + p.failed;
-			const status = p.running > 0 ? "running" : p.queued > 0 ? "queued" : done >= p.total ? "done" : "waiting";
-			return `  Phase ${p.index + 1} ${p.phase}: ${p.percentage}% (${done}/${p.total}) [${status}]`;
-		})
-		: [];
-	const phaseHeader = phaseLines.length > 0 ? [formatPhaseProgressLine(runProgress), ...phaseLines] : [];
-	return [
-		`Progress pane: ${progress.completed}/${progress.total} completed · running=${progress.running} queued=${progress.queued} failed=${progress.failed}`,
-		...phaseHeader,
-		...cancellationLine,
-		...groupJoinLines,
-		...snapshot.recentEvents.slice(-10).map((event) => {
-			const seq = event.metadata?.seq !== undefined ? `#${event.metadata.seq}` : "#?";
-			return `${seq} ${event.time} ${event.type}${event.taskId ? ` ${event.taskId}` : ""}${event.message ? ` · ${event.message}` : ""}`;
-		}),
-		...(snapshot.recentEvents.length ? [] : ["No recent events"]),
-	];
-}
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+import { computePhaseProgress, formatPhaseProgressLine } from "../../runtime/phase-progress.ts";
+
+export function renderProgressPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Progress pane: snapshot unavailable"];
+	const progress = snapshot.progress;
+	const groupJoins = snapshot.groupJoins ?? [];
+	const groupJoinLines = groupJoins.length ? groupJoins.map((item) => `group join ${item.partial ? "partial" : "completed"}: ${item.requestId} ack=${item.ack}`) : ["group joins: none"];
+	const cancellationLine = snapshot.cancellationReason ? [`cancelled: reason=${snapshot.cancellationReason}`] : [];
+	const runProgress = computePhaseProgress(snapshot.tasks);
+	const phaseLines = runProgress.phases.length > 0
+		? runProgress.phases.map((p) => {
+			const done = p.completed + p.failed;
+			const status = p.running > 0 ? "running" : p.queued > 0 ? "queued" : done >= p.total ? "done" : "waiting";
+			return `  Phase ${p.index + 1} ${p.phase}: ${p.percentage}% (${done}/${p.total}) [${status}]`;
+		})
+		: [];
+	const phaseHeader = phaseLines.length > 0 ? [formatPhaseProgressLine(runProgress), ...phaseLines] : [];
+	return [
+		`Progress pane: ${progress.completed}/${progress.total} completed · running=${progress.running} queued=${progress.queued} failed=${progress.failed}`,
+		...phaseHeader,
+		...cancellationLine,
+		...groupJoinLines,
+		...snapshot.recentEvents.slice(-10).map((event) => {
+			const seq = event.metadata?.seq !== undefined ? `#${event.metadata.seq}` : "#?";
+			return `${seq} ${event.time} ${event.type}${event.taskId ? ` ${event.taskId}` : ""}${event.message ? ` · ${event.message}` : ""}`;
+		}),
+		...(snapshot.recentEvents.length ? [] : ["No recent events"]),
+	];
+}

package/src/ui/dashboard-panes/transcript-pane.ts

@@ -1,10 +1,10 @@
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export function renderTranscriptPane(snapshot: RunUiSnapshot | undefined): string[] {
-	if (!snapshot) return ["Output pane: snapshot unavailable"];
-	return [
-		`Output pane: ${snapshot.recentOutputLines.length} recent lines · press v for transcript viewer · o for raw output`,
-		...snapshot.recentOutputLines.slice(-12).map((line) => `⎿ ${line}`),
-		...(snapshot.recentOutputLines.length ? [] : ["No recent output"]),
-	];
-}
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export function renderTranscriptPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Output pane: snapshot unavailable"];
+	return [
+		`Output pane: ${snapshot.recentOutputLines.length} recent lines · press v for transcript viewer · o for raw output`,
+		...snapshot.recentOutputLines.slice(-12).map((line) => `⎿ ${line}`),
+		...(snapshot.recentOutputLines.length ? [] : ["No recent output"]),
+	];
+}