pi-crew 0.1.46 → 0.1.49

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 { runEventBus } from "./run-event-bus.ts";
 import { DEFAULT_UI } from "../config/defaults.ts";
 
 const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -78,7 +79,11 @@ function agentActivity(agent: CrewAgentRecord): string {
 	if (recent) return recent.replace(/\s+/g, " ").trim();
 	if (agent.progress?.activityState === "needs_attention") return "needs attention";
 	if (agent.status === "queued") return "queued";
-	if (agent.status === "running") return "thinking…";
+	if (agent.status === "running") {
+		const age = agent.startedAt ? Date.now() - new Date(agent.startedAt).getTime() : Infinity;
+		if (age < 5000 && !agent.progress?.currentTool) return "spawning…";
+		return "thinking…";
+	}
 	if (agent.status === "failed") return agent.error ?? "failed";
 	return "done";
 }
@@ -219,6 +224,7 @@ class CrewWidgetComponent implements WidgetComponent {
 	private cachedBaseLines: string[] = [];
 	private cachedTheme: CrewTheme;
 	private readonly unsubscribeTheme: () => void;
+	private readonly unsubscribeEventBus: () => void;
 
 	constructor(model: CrewWidgetModel, themeLike: unknown) {
 		this.model = model;
@@ -226,6 +232,7 @@ class CrewWidgetComponent implements WidgetComponent {
 		this.cachedTheme = this.theme;
 		this.cacheSignature = "";
 		this.unsubscribeTheme = subscribeThemeChange(themeLike, () => this.invalidate());
+		this.unsubscribeEventBus = runEventBus.onAny(() => this.invalidate());
 	}
 
 	private buildSignature(runs: WidgetRun[]): string {
@@ -250,6 +257,7 @@ class CrewWidgetComponent implements WidgetComponent {
 
 	dispose(): void {
 		this.unsubscribeTheme();
+		this.unsubscribeEventBus();
 	}
 
 	render(width: number): string[] {
@@ -274,7 +282,8 @@ class CrewWidgetComponent implements WidgetComponent {
 		// Update only spinner and command icon on header line to avoid full re-color for every frame.
 		const updatedHeader = `${runningGlyph}${this.cachedBaseLines[0]?.slice(1) ?? ""}`;
 		this.cachedLines[0] = truncate(colorWidgetLine(updatedHeader, 0, this.theme), width);
-		return this.cachedLines;
+		// Safety: ensure all lines fit within terminal width (handles emoji/CJK width mismatch)
+		return this.cachedLines.map((line) => truncate(line, width));
 	}
 }
 

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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;
+}

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

@@ -1,11 +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)" : "";
-	return [
-		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}${approx}`,
-		mailbox.needsAttention > 0 ? "Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all." : "No mailbox items need attention. Press Enter for detail or C compose.",
-	];
-}
+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;
+}