pi-crew 0.1.45 → 0.1.46

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

@@ -13,6 +13,7 @@ import { asCrewTheme, subscribeThemeChange } from "./theme-adapter.ts";
 import { Box, Text } from "./layout-primitives.ts";
 import { requestRender, setExtensionWidget } from "./pi-ui-compat.ts";
 import type { RunSnapshotCache, RunUiSnapshot } from "./snapshot-types.ts";
+import { DEFAULT_UI } from "../config/defaults.ts";
 
 const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const TOOL_LABELS: Record<string, string> = {
@@ -28,7 +29,7 @@ const LEGACY_WIDGET_KEY = "pi-crew";
 const WIDGET_KEY = "pi-crew-active";
 const STATUS_KEY = "pi-crew";
 
-const MAX_LINES_DEFAULT = 10;
+const MAX_LINES_DEFAULT = DEFAULT_UI.widgetMaxLines;
 const MAX_AGENTS_DISPLAY = 3;
 
 type WidgetComponent = { render(width: number): string[]; invalidate(): void };
@@ -290,7 +291,7 @@ export function updateCrewWidget(
 	const maxLines = config?.widgetMaxLines ?? MAX_LINES_DEFAULT;
 	const runs = activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache, preloadedManifests);
 	const lines = buildCrewWidgetLines(ctx.cwd, state.frame, maxLines, runs, state.notificationCount ?? 0);
-	const placement = config?.widgetPlacement ?? "aboveEditor";
+	const placement = config?.widgetPlacement ?? DEFAULT_UI.widgetPlacement;
 	ctx.ui.setStatus(STATUS_KEY, lines.length ? statusSummary(runs) : undefined);
 	const shouldClearLegacy = state.legacyCleared !== true || state.lastPlacement !== placement;
 	if (shouldClearLegacy) {
@@ -341,7 +342,7 @@ export function stopCrewWidget(ctx: Pick<ExtensionContext, "hasUI" | "ui"> | und
 	if (state.interval) clearInterval(state.interval);
 	state.interval = undefined;
 	if (ctx?.hasUI) {
-		const placement = config?.widgetPlacement ?? "aboveEditor";
+		const placement = config?.widgetPlacement ?? DEFAULT_UI.widgetPlacement;
 		ctx.ui.setStatus(STATUS_KEY, undefined);
 		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement });
 		setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement });

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

@@ -1,34 +1,34 @@
-import type { MetricRegistry } from "../../observability/metric-registry.ts";
-import type { HistogramPoint, MetricLabels, MetricPoint } from "../../observability/metrics-primitives.ts";
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export interface MetricsPaneOptions {
-	registry?: MetricRegistry;
-	maxCounters?: number;
-}
-
-function labelsText(labels: MetricLabels): string {
-	const entries = Object.entries(labels);
-	return entries.length ? `{${entries.map(([key, value]) => `${key}=${value}`).join(",")}}` : "";
-}
-
-function isHistogramPoint(point: MetricPoint | HistogramPoint): point is HistogramPoint {
-	return "quantiles" in point;
-}
-
-export function renderMetricsPane(_snapshot: RunUiSnapshot | undefined, opts: MetricsPaneOptions = {}): string[] {
-	if (!opts.registry) return ["Metrics pane: registry unavailable"];
-	const snapshots = opts.registry.snapshot();
-	if (!snapshots.length) return ["Metrics pane: no metrics recorded"];
-	const lines = ["Metrics pane: top metrics"];
-	for (const snapshot of snapshots.slice(0, opts.maxCounters ?? 10)) {
-		const first = snapshot.values[0];
-		if (!first) {
-			lines.push(`${snapshot.name}: empty`);
-			continue;
-		}
-		if (isHistogramPoint(first)) lines.push(`${snapshot.name}${labelsText(first.labels)} count=${first.count} p95=${Number.isFinite(first.quantiles.p95) ? Math.round(first.quantiles.p95) : "n/a"}`);
-		else lines.push(`${snapshot.name}${labelsText(first.labels)} ${first.value}`);
-	}
-	return lines;
-}
+import type { MetricRegistry } from "../../observability/metric-registry.ts";
+import type { HistogramPoint, MetricLabels, MetricPoint } from "../../observability/metrics-primitives.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export interface MetricsPaneOptions {
+	registry?: MetricRegistry;
+	maxCounters?: number;
+}
+
+function labelsText(labels: MetricLabels): string {
+	const entries = Object.entries(labels);
+	return entries.length ? `{${entries.map(([key, value]) => `${key}=${value}`).join(",")}}` : "";
+}
+
+function isHistogramPoint(point: MetricPoint | HistogramPoint): point is HistogramPoint {
+	return "quantiles" in point;
+}
+
+export function renderMetricsPane(_snapshot: RunUiSnapshot | undefined, opts: MetricsPaneOptions = {}): string[] {
+	if (!opts.registry) return ["Metrics pane: registry unavailable"];
+	const snapshots = opts.registry.snapshot();
+	if (!snapshots.length) return ["Metrics pane: no metrics recorded"];
+	const lines = ["Metrics pane: top metrics"];
+	for (const snapshot of snapshots.slice(0, opts.maxCounters ?? 10)) {
+		const first = snapshot.values[0];
+		if (!first) {
+			lines.push(`${snapshot.name}: empty`);
+			continue;
+		}
+		if (isHistogramPoint(first)) lines.push(`${snapshot.name}${labelsText(first.labels)} count=${first.count} p95=${Number.isFinite(first.quantiles.p95) ? Math.round(first.quantiles.p95) : "n/a"}`);
+		else lines.push(`${snapshot.name}${labelsText(first.labels)} ${first.value}`);
+	}
+	return lines;
+}

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

@@ -5,8 +5,10 @@ export function renderProgressPane(snapshot: RunUiSnapshot | undefined): string[
 	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}`] : [];
 	return [
 		`Progress pane: ${progress.completed}/${progress.total} completed · running=${progress.running} queued=${progress.queued} failed=${progress.failed}`,
+		...cancellationLine,
 		...groupJoinLines,
 		...snapshot.recentEvents.slice(-10).map((event) => {
 			const seq = event.metadata?.seq !== undefined ? `#${event.metadata.seq}` : "#?";