pi-crew 0.1.51 → 0.2.1

package/src/teams/team-serializer.ts

@@ -1,38 +1,38 @@
-import type { TeamConfig, TeamRole } from "./team-config.ts";
-
-function line(key: string, value: string | string[] | undefined): string | undefined {
-	if (value === undefined) return undefined;
-	if (Array.isArray(value)) return `${key}: ${value.join(", ")}`;
-	return `${key}: ${value}`;
-}
-
-function serializeRole(role: TeamRole): string {
-	const parts = [`agent=${role.agent}`];
-	if (role.model) parts.push(`model=${role.model}`);
-	if (role.skills === false) parts.push("skills=false");
-	else if (role.skills?.length) parts.push(`skills=${role.skills.join(",")}`);
-	if (role.maxConcurrency !== undefined) parts.push(`maxConcurrency=${role.maxConcurrency}`);
-	if (role.description) parts.push(role.description);
-	return `- ${role.name}: ${parts.join(" ")}`;
-}
-
-export function serializeTeam(team: TeamConfig): string {
-	const lines = [
-		"---",
-		`name: ${team.name}`,
-		`description: ${team.description}`,
-		team.defaultWorkflow ? `defaultWorkflow: ${team.defaultWorkflow}` : undefined,
-		team.workspaceMode ? `workspaceMode: ${team.workspaceMode}` : undefined,
-		team.maxConcurrency !== undefined ? `maxConcurrency: ${team.maxConcurrency}` : undefined,
-		line("triggers", team.routing?.triggers),
-		line("useWhen", team.routing?.useWhen),
-		line("avoidWhen", team.routing?.avoidWhen),
-		line("cost", team.routing?.cost),
-		line("category", team.routing?.category),
-		"---",
-		"",
-		...team.roles.map(serializeRole),
-		"",
-	].filter((entry): entry is string => entry !== undefined);
-	return lines.join("\n");
-}
+import type { TeamConfig, TeamRole } from "./team-config.ts";
+
+function line(key: string, value: string | string[] | undefined): string | undefined {
+	if (value === undefined) return undefined;
+	if (Array.isArray(value)) return `${key}: ${value.join(", ")}`;
+	return `${key}: ${value}`;
+}
+
+function serializeRole(role: TeamRole): string {
+	const parts = [`agent=${role.agent}`];
+	if (role.model) parts.push(`model=${role.model}`);
+	if (role.skills === false) parts.push("skills=false");
+	else if (role.skills?.length) parts.push(`skills=${role.skills.join(",")}`);
+	if (role.maxConcurrency !== undefined) parts.push(`maxConcurrency=${role.maxConcurrency}`);
+	if (role.description) parts.push(role.description);
+	return `- ${role.name}: ${parts.join(" ")}`;
+}
+
+export function serializeTeam(team: TeamConfig): string {
+	const lines = [
+		"---",
+		`name: ${team.name}`,
+		`description: ${team.description}`,
+		team.defaultWorkflow ? `defaultWorkflow: ${team.defaultWorkflow}` : undefined,
+		team.workspaceMode ? `workspaceMode: ${team.workspaceMode}` : undefined,
+		team.maxConcurrency !== undefined ? `maxConcurrency: ${team.maxConcurrency}` : undefined,
+		line("triggers", team.routing?.triggers),
+		line("useWhen", team.routing?.useWhen),
+		line("avoidWhen", team.routing?.avoidWhen),
+		line("cost", team.routing?.cost),
+		line("category", team.routing?.category),
+		"---",
+		"",
+		...team.roles.map(serializeRole),
+		"",
+	].filter((entry): entry is string => entry !== undefined);
+	return lines.join("\n");
+}

package/src/types/diff.d.ts

@@ -1,18 +1,18 @@
-declare module "diff" {
-	export interface Change {
-		value: string;
-		count?: number;
-		added?: boolean;
-		removed?: boolean;
-	}
-
-	export interface DiffOptions {
-		ignoreCase?: boolean;
-		newlineIsToken?: boolean;
-		ignoreWhitespace?: boolean;
-		stripTrailingCr?: boolean;
-		oneChangePerToken?: boolean;
-	}
-
-	export function diffWords(oldStr: string, newStr: string, options?: DiffOptions): Change[];
-}
+declare module "diff" {
+	export interface Change {
+		value: string;
+		count?: number;
+		added?: boolean;
+		removed?: boolean;
+	}
+
+	export interface DiffOptions {
+		ignoreCase?: boolean;
+		newlineIsToken?: boolean;
+		ignoreWhitespace?: boolean;
+		stripTrailingCr?: boolean;
+		oneChangePerToken?: boolean;
+	}
+
+	export function diffWords(oldStr: string, newStr: string, options?: DiffOptions): Change[];
+}

package/src/ui/crew-footer.ts

@@ -1,101 +1,101 @@
-import type { UsageState } from "../state/types.ts";
-import { pad, truncate } from "../utils/visual.ts";
-import type { RunStatus } from "./status-colors.ts";
-import type { CrewTheme } from "./theme-adapter.ts";
-
-export interface CrewFooterData {
-	pwd: string;
-	branch?: string;
-	runId?: string;
-	status?: RunStatus;
-	usage?: UsageState;
-	contextWindow?: number;
-	contextPercent?: number;
-	badges?: string[];
-}
-
-function formatCount(value: number | undefined): string {
-	if (value === undefined || !Number.isFinite(value)) return "?";
-	if (Math.abs(value) >= 1000) return `${(value / 1000).toFixed(Math.abs(value) >= 10_000 ? 0 : 1)}k`;
-	return `${value}`;
-}
-
-function formatCost(value: number | undefined): string {
-	return value === undefined || !Number.isFinite(value) ? "$0.0000" : `$${value.toFixed(4)}`;
-}
-
-function displayPwd(pwd: string): string {
-	const home = process.env.HOME || process.env.USERPROFILE;
-	if (home && pwd.startsWith(home)) return `~${pwd.slice(home.length) || "/"}`;
-	return pwd || ".";
-}
-
-function contextText(data: CrewFooterData): string {
-	const windowText = data.contextWindow && Number.isFinite(data.contextWindow) ? formatCount(data.contextWindow) : "window";
-	const percent = data.contextPercent;
-	if (percent === undefined || !Number.isFinite(percent)) return `?/${windowText}`;
-	return `${percent.toFixed(1)}%/${windowText}`;
-}
-
-export class CrewFooter {
-	private data: CrewFooterData;
-	private readonly theme: CrewTheme;
-	private cacheKey = "";
-	private cacheWidth = 0;
-	private cacheLines: string[] = [];
-
-	constructor(data: CrewFooterData, theme: CrewTheme) {
-		this.data = data;
-		this.theme = theme;
-	}
-
-	setData(data: CrewFooterData): void {
-		this.data = data;
-		this.invalidate();
-	}
-
-	invalidate(): void {
-		this.cacheKey = "";
-		this.cacheLines = [];
-	}
-
-	render(width: number): string[] {
-		const key = JSON.stringify(this.data);
-		if (this.cacheKey === key && this.cacheWidth === width && this.cacheLines.length) return this.cacheLines;
-		const lineWidth = Math.max(1, width);
-		const firstParts = [
-			displayPwd(this.data.pwd),
-			this.data.branch ? `(${this.data.branch})` : undefined,
-			this.data.runId,
-			this.data.status,
-		].filter((part): part is string => Boolean(part));
-		const usage = this.data.usage;
-		const context = contextText(this.data);
-		const contextPercent = this.data.contextPercent;
-		const contextColor = contextPercent !== undefined && Number.isFinite(contextPercent)
-			? contextPercent > 90
-				? "error"
-				: contextPercent > 70
-					? "warning"
-					: undefined
-			: undefined;
-		const contextRendered = contextColor ? this.theme.fg(contextColor, context) : context;
-		const usageLine = [
-			`↑${formatCount(usage?.input)}`,
-			`↓${formatCount(usage?.output)}`,
-			`R ${formatCount(usage?.cacheRead)} cache`,
-			`W ${formatCount(usage?.cacheWrite)} cache`,
-			formatCost(usage?.cost),
-			contextRendered,
-		].join(" • ");
-		const badges = this.data.badges?.length ? this.data.badges.map((badge) => `[${badge}]`).join(" ") : "";
-		this.cacheLines = [
-			this.theme.fg("dim", pad(truncate(firstParts.join(" • "), lineWidth, "..."), lineWidth)),
-			this.theme.fg("dim", pad(truncate(usageLine, lineWidth, "..."), lineWidth)),
-			this.theme.fg("dim", pad(truncate(badges, lineWidth, "..."), lineWidth)),
-		];
-		this.cacheKey = key;
-		this.cacheWidth = width;
-		return this.cacheLines;
-	}
-}
+import type { UsageState } from "../state/types.ts";
+import { pad, truncate } from "../utils/visual.ts";
+import type { RunStatus } from "./status-colors.ts";
+import type { CrewTheme } from "./theme-adapter.ts";
+
+export interface CrewFooterData {
+	pwd: string;
+	branch?: string;
+	runId?: string;
+	status?: RunStatus;
+	usage?: UsageState;
+	contextWindow?: number;
+	contextPercent?: number;
+	badges?: string[];
+}
+
+function formatCount(value: number | undefined): string {
+	if (value === undefined || !Number.isFinite(value)) return "?";
+	if (Math.abs(value) >= 1000) return `${(value / 1000).toFixed(Math.abs(value) >= 10_000 ? 0 : 1)}k`;
+	return `${value}`;
+}
+
+function formatCost(value: number | undefined): string {
+	return value === undefined || !Number.isFinite(value) ? "$0.0000" : `$${value.toFixed(4)}`;
+}
+
+function displayPwd(pwd: string): string {
+	const home = process.env.HOME || process.env.USERPROFILE;
+	if (home && pwd.startsWith(home)) return `~${pwd.slice(home.length) || "/"}`;
+	return pwd || ".";
+}
+
+function contextText(data: CrewFooterData): string {
+	const windowText = data.contextWindow && Number.isFinite(data.contextWindow) ? formatCount(data.contextWindow) : "window";
+	const percent = data.contextPercent;
+	if (percent === undefined || !Number.isFinite(percent)) return `?/${windowText}`;
+	return `${percent.toFixed(1)}%/${windowText}`;
+}
+
+export class CrewFooter {
+	private data: CrewFooterData;
+	private readonly theme: CrewTheme;
+	private cacheKey = "";
+	private cacheWidth = 0;
+	private cacheLines: string[] = [];
+
+	constructor(data: CrewFooterData, theme: CrewTheme) {
+		this.data = data;
+		this.theme = theme;
+	}
+
+	setData(data: CrewFooterData): void {
+		this.data = data;
+		this.invalidate();
+	}
+
+	invalidate(): void {
+		this.cacheKey = "";
+		this.cacheLines = [];
+	}
+
+	render(width: number): string[] {
+		const key = JSON.stringify(this.data);
+		if (this.cacheKey === key && this.cacheWidth === width && this.cacheLines.length) return this.cacheLines;
+		const lineWidth = Math.max(1, width);
+		const firstParts = [
+			displayPwd(this.data.pwd),
+			this.data.branch ? `(${this.data.branch})` : undefined,
+			this.data.runId,
+			this.data.status,
+		].filter((part): part is string => Boolean(part));
+		const usage = this.data.usage;
+		const context = contextText(this.data);
+		const contextPercent = this.data.contextPercent;
+		const contextColor = contextPercent !== undefined && Number.isFinite(contextPercent)
+			? contextPercent > 90
+				? "error"
+				: contextPercent > 70
+					? "warning"
+					: undefined
+			: undefined;
+		const contextRendered = contextColor ? this.theme.fg(contextColor, context) : context;
+		const usageLine = [
+			`↑${formatCount(usage?.input)}`,
+			`↓${formatCount(usage?.output)}`,
+			`R ${formatCount(usage?.cacheRead)} cache`,
+			`W ${formatCount(usage?.cacheWrite)} cache`,
+			formatCost(usage?.cost),
+			contextRendered,
+		].join(" • ");
+		const badges = this.data.badges?.length ? this.data.badges.map((badge) => `[${badge}]`).join(" ") : "";
+		this.cacheLines = [
+			this.theme.fg("dim", pad(truncate(firstParts.join(" • "), lineWidth, "..."), lineWidth)),
+			this.theme.fg("dim", pad(truncate(usageLine, lineWidth, "..."), lineWidth)),
+			this.theme.fg("dim", pad(truncate(badges, lineWidth, "..."), lineWidth)),
+		];
+		this.cacheKey = key;
+		this.cacheWidth = width;
+		return this.cacheLines;
+	}
+}

package/src/ui/crew-select-list.ts

@@ -1,111 +1,111 @@
-import { pad, truncate } from "../utils/visual.ts";
-import type { CrewTheme } from "./theme-adapter.ts";
-
-export interface CrewSelectItem<T = string> {
-	value: T;
-	label: string;
-	description?: string;
-}
-
-export interface CrewSelectListOptions<T = string> {
-	onSelect: (item: CrewSelectItem<T>) => void;
-	onCancel: () => void;
-	onPreview?: (item: CrewSelectItem<T>) => void;
-	maxHeight?: number;
-}
-
-export class CrewSelectList<T = string> {
-	private readonly items: CrewSelectItem<T>[];
-	private readonly theme: CrewTheme;
-	private readonly options: CrewSelectListOptions<T>;
-	private selectedIndex = 0;
-	private scrollOffset = 0;
-
-	constructor(items: CrewSelectItem<T>[], theme: CrewTheme, options: CrewSelectListOptions<T>) {
-		this.items = [...items];
-		this.theme = theme;
-		this.options = options;
-		this.selectedIndex = this.items.length ? 0 : -1;
-	}
-
-	invalidate(): void {}
-
-	getSelected(): CrewSelectItem<T> | undefined {
-		return this.selectedIndex >= 0 ? this.items[this.selectedIndex] : undefined;
-	}
-
-	setSelectedIndex(index: number): void {
-		if (!this.items.length) {
-			this.selectedIndex = -1;
-			this.scrollOffset = 0;
-			return;
-		}
-		const next = Math.min(this.items.length - 1, Math.max(0, index));
-		const changed = next !== this.selectedIndex;
-		this.selectedIndex = next;
-		this.ensureVisible();
-		if (changed) {
-			const selected = this.getSelected();
-			if (selected) this.options.onPreview?.(selected);
-		}
-	}
-
-	handleInput(data: string): void {
-		if (data === "q" || data === "\u001b") {
-			this.options.onCancel();
-			return;
-		}
-		if (data === "j" || data === "\u001b[B") {
-			this.setSelectedIndex(this.selectedIndex + 1);
-			return;
-		}
-		if (data === "k" || data === "\u001b[A") {
-			this.setSelectedIndex(this.selectedIndex - 1);
-			return;
-		}
-		if (data === "\r" || data === "\n") {
-			const selected = this.getSelected();
-			if (selected) this.options.onSelect(selected);
-		}
-	}
-
-	render(width: number): string[] {
-		if (!this.items.length) return [this.theme.fg("muted", "(no items)")];
-		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
-		this.ensureVisible();
-		const hasTop = this.scrollOffset > 0;
-		const availableWithoutBottom = Math.max(1, maxHeight - (hasTop ? 1 : 0));
-		const hasBottom = this.scrollOffset + availableWithoutBottom < this.items.length;
-		const slots = this.visibleItemSlots(maxHeight, hasTop, hasBottom);
-		const visibleItems = this.items.slice(this.scrollOffset, this.scrollOffset + slots);
-		const lines: string[] = [];
-		if (hasTop) lines.push(this.theme.fg("muted", `↑ ${this.scrollOffset} more`));
-		for (const [offset, item] of visibleItems.entries()) {
-			const index = this.scrollOffset + offset;
-			const prefix = index === this.selectedIndex ? " → " : "   ";
-			const suffix = item.description ? this.theme.fg("dim", ` — ${item.description}`) : "";
-			const raw = `${prefix}${item.label}${suffix}`;
-			const line = index === this.selectedIndex ? this.theme.inverse?.(raw) ?? raw : raw;
-			lines.push(pad(truncate(line, width, "..."), Math.max(1, width)));
-		}
-		if (hasBottom) lines.push(this.theme.fg("muted", `↓ ${this.items.length - (this.scrollOffset + slots)} more`));
-		return lines.slice(0, maxHeight);
-	}
-
-	private visibleItemSlots(maxHeight: number, hasTop: boolean, hasBottom: boolean): number {
-		return Math.max(1, maxHeight - (hasTop ? 1 : 0) - (hasBottom ? 1 : 0));
-	}
-
-	private ensureVisible(): void {
-		if (this.selectedIndex < 0) return;
-		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
-		const reservedTop = this.scrollOffset > 0 ? 1 : 0;
-		const visibleSlots = Math.max(1, maxHeight - reservedTop - 1);
-		if (this.selectedIndex < this.scrollOffset) {
-			this.scrollOffset = this.selectedIndex;
-		} else if (this.selectedIndex >= this.scrollOffset + visibleSlots) {
-			this.scrollOffset = Math.max(0, this.selectedIndex - visibleSlots + 1);
-		}
-		this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.items.length - 1));
-	}
-}
+import { pad, truncate } from "../utils/visual.ts";
+import type { CrewTheme } from "./theme-adapter.ts";
+
+export interface CrewSelectItem<T = string> {
+	value: T;
+	label: string;
+	description?: string;
+}
+
+export interface CrewSelectListOptions<T = string> {
+	onSelect: (item: CrewSelectItem<T>) => void;
+	onCancel: () => void;
+	onPreview?: (item: CrewSelectItem<T>) => void;
+	maxHeight?: number;
+}
+
+export class CrewSelectList<T = string> {
+	private readonly items: CrewSelectItem<T>[];
+	private readonly theme: CrewTheme;
+	private readonly options: CrewSelectListOptions<T>;
+	private selectedIndex = 0;
+	private scrollOffset = 0;
+
+	constructor(items: CrewSelectItem<T>[], theme: CrewTheme, options: CrewSelectListOptions<T>) {
+		this.items = [...items];
+		this.theme = theme;
+		this.options = options;
+		this.selectedIndex = this.items.length ? 0 : -1;
+	}
+
+	invalidate(): void {}
+
+	getSelected(): CrewSelectItem<T> | undefined {
+		return this.selectedIndex >= 0 ? this.items[this.selectedIndex] : undefined;
+	}
+
+	setSelectedIndex(index: number): void {
+		if (!this.items.length) {
+			this.selectedIndex = -1;
+			this.scrollOffset = 0;
+			return;
+		}
+		const next = Math.min(this.items.length - 1, Math.max(0, index));
+		const changed = next !== this.selectedIndex;
+		this.selectedIndex = next;
+		this.ensureVisible();
+		if (changed) {
+			const selected = this.getSelected();
+			if (selected) this.options.onPreview?.(selected);
+		}
+	}
+
+	handleInput(data: string): void {
+		if (data === "q" || data === "\u001b") {
+			this.options.onCancel();
+			return;
+		}
+		if (data === "j" || data === "\u001b[B") {
+			this.setSelectedIndex(this.selectedIndex + 1);
+			return;
+		}
+		if (data === "k" || data === "\u001b[A") {
+			this.setSelectedIndex(this.selectedIndex - 1);
+			return;
+		}
+		if (data === "\r" || data === "\n") {
+			const selected = this.getSelected();
+			if (selected) this.options.onSelect(selected);
+		}
+	}
+
+	render(width: number): string[] {
+		if (!this.items.length) return [this.theme.fg("muted", "(no items)")];
+		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
+		this.ensureVisible();
+		const hasTop = this.scrollOffset > 0;
+		const availableWithoutBottom = Math.max(1, maxHeight - (hasTop ? 1 : 0));
+		const hasBottom = this.scrollOffset + availableWithoutBottom < this.items.length;
+		const slots = this.visibleItemSlots(maxHeight, hasTop, hasBottom);
+		const visibleItems = this.items.slice(this.scrollOffset, this.scrollOffset + slots);
+		const lines: string[] = [];
+		if (hasTop) lines.push(this.theme.fg("muted", `↑ ${this.scrollOffset} more`));
+		for (const [offset, item] of visibleItems.entries()) {
+			const index = this.scrollOffset + offset;
+			const prefix = index === this.selectedIndex ? " → " : "   ";
+			const suffix = item.description ? this.theme.fg("dim", ` — ${item.description}`) : "";
+			const raw = `${prefix}${item.label}${suffix}`;
+			const line = index === this.selectedIndex ? this.theme.inverse?.(raw) ?? raw : raw;
+			lines.push(pad(truncate(line, width, "..."), Math.max(1, width)));
+		}
+		if (hasBottom) lines.push(this.theme.fg("muted", `↓ ${this.items.length - (this.scrollOffset + slots)} more`));
+		return lines.slice(0, maxHeight);
+	}
+
+	private visibleItemSlots(maxHeight: number, hasTop: boolean, hasBottom: boolean): number {
+		return Math.max(1, maxHeight - (hasTop ? 1 : 0) - (hasBottom ? 1 : 0));
+	}
+
+	private ensureVisible(): void {
+		if (this.selectedIndex < 0) return;
+		const maxHeight = Math.max(1, Math.floor(this.options.maxHeight ?? this.items.length));
+		const reservedTop = this.scrollOffset > 0 ? 1 : 0;
+		const visibleSlots = Math.max(1, maxHeight - reservedTop - 1);
+		if (this.selectedIndex < this.scrollOffset) {
+			this.scrollOffset = this.selectedIndex;
+		} else if (this.selectedIndex >= this.scrollOffset + visibleSlots) {
+			this.scrollOffset = Math.max(0, this.selectedIndex - visibleSlots + 1);
+		}
+		this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.items.length - 1));
+	}
+}

package/src/ui/crew-widget.ts

@@ -15,6 +15,7 @@ import { requestRender, setExtensionWidget } from "./pi-ui-compat.ts";
 import type { RunSnapshotCache, RunUiSnapshot } from "./snapshot-types.ts";
 import { runEventBus } from "./run-event-bus.ts";
 import { DEFAULT_UI } from "../config/defaults.ts";
+import { computePhaseProgress, formatPhaseProgressLine } from "../runtime/phase-progress.ts";
 
 const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const TOOL_LABELS: Record<string, string> = {
@@ -163,11 +164,13 @@ export function buildCrewWidgetLines(cwd: string, frame = 0, maxLines = 8, provi
 	if (!runs.length) return [];
 	const runningGlyph = SPINNER[frame % SPINNER.length] ?? SPINNER[0];
 	const lines: string[] = [widgetHeader(runs, runningGlyph, maxLines, notificationCount)];
-	for (const { run, agents } of runs) {
+	for (const { run, agents, snapshot } of runs) {
 		const activeAgents = agents.filter((item) => item.status === "running" || item.status === "queued" || item.status === "waiting");
 		const completed = agents.filter((agent) => agent.status === "completed").length;
 		const runGlyph = iconForStatus(run.status, { runningGlyph });
-		lines.push(`├─ ${runGlyph} ${shortRunLabel(run)} · ${completed}/${agents.length} done · ${run.runId.slice(-8)}`);
+		const phaseLine = snapshot ? formatPhaseProgressLine(computePhaseProgress(snapshot.tasks)) : "";
+		const progressPart = phaseLine ? `${phaseLine}` : `${completed}/${agents.length} done`;
+		lines.push(`├─ ${runGlyph} ${shortRunLabel(run)} · ${progressPart} · ${run.runId.slice(-8)}`);
 		const visibleAgents = activeAgents.slice(0, MAX_AGENTS_DISPLAY);
 		for (const [index, agent] of visibleAgents.entries()) {
 			const last = index === visibleAgents.length - 1 && activeAgents.length <= MAX_AGENTS_DISPLAY;

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;
 }