pi-crew 0.9.53 → 0.9.55

package/src/ui/agent-management-overlay.ts

@@ -0,0 +1,160 @@
+/**
+ * Agent Management Overlay — displays discovered agents with their configuration.
+ * Read-only view of agent definitions from builtin/user/project sources.
+ * Future: enable/disable toggle, model override editing.
+ */
+import type { AgentConfig, ResourceSource } from "../agents/agent-config.ts";
+import { truncate } from "../utils/visual.ts";
+
+export interface AgentEntry {
+	name: string;
+	description: string;
+	source: ResourceSource;
+	model?: string;
+	thinking?: string;
+	loadMode?: string;
+	contextMode?: string;
+	disabled?: boolean;
+	filePath: string;
+}
+
+export function agentToEntry(agent: AgentConfig): AgentEntry {
+	return {
+		name: agent.name,
+		description: agent.description,
+		source: agent.source,
+		model: agent.model,
+		thinking: agent.thinking,
+		loadMode: agent.loadMode,
+		contextMode: agent.contextMode,
+		disabled: agent.disabled,
+		filePath: agent.filePath,
+	};
+}
+
+function sourceIcon(source: ResourceSource): string {
+	switch (source) {
+		case "builtin":
+			return "📦";
+		case "user":
+			return "👤";
+		case "project":
+			return "📂";
+		case "git":
+			return "🔗";
+		case "dynamic":
+			return "⚡";
+		default:
+			return "❓";
+	}
+}
+
+function sourceLabel(source: ResourceSource): string {
+	switch (source) {
+		case "builtin":
+			return "builtin";
+		case "user":
+			return "user";
+		case "project":
+			return "project";
+		case "git":
+			return "git";
+		case "dynamic":
+			return "dynamic";
+		default:
+			return "unknown";
+	}
+}
+
+export interface AgentOverlayState {
+	entries: AgentEntry[];
+	selectedIndex: number;
+	scrollOffset: number;
+	expanded: Set<number>;
+	maxVisible: number;
+}
+
+export function createAgentOverlayState(entries: AgentEntry[], maxVisible = 20): AgentOverlayState {
+	return {
+		entries: entries.sort((a, b) => {
+			const order: Record<ResourceSource, number> = {
+				project: 0,
+				"project-pi": 1,
+				user: 2,
+				git: 3,
+				builtin: 4,
+				dynamic: 5,
+			};
+			const diff = (order[a.source] ?? 4) - (order[b.source] ?? 4);
+			return diff !== 0 ? diff : a.name.localeCompare(b.name);
+		}),
+		selectedIndex: 0,
+		scrollOffset: 0,
+		expanded: new Set(),
+		maxVisible,
+	};
+}
+
+export function moveSelection(state: AgentOverlayState, direction: -1 | 1): AgentOverlayState {
+	const next = Math.max(0, Math.min(state.entries.length - 1, state.selectedIndex + direction));
+	const visibleStart = state.scrollOffset;
+	const visibleEnd = state.scrollOffset + state.maxVisible;
+	const newScroll = next < visibleStart ? next : next >= visibleEnd ? Math.max(0, next - state.maxVisible + 1) : state.scrollOffset;
+	return { ...state, selectedIndex: next, scrollOffset: newScroll };
+}
+
+export function toggleExpand(state: AgentOverlayState): AgentOverlayState {
+	const expanded = new Set(state.expanded);
+	if (expanded.has(state.selectedIndex)) {
+		expanded.delete(state.selectedIndex);
+	} else {
+		expanded.add(state.selectedIndex);
+	}
+	return { ...state, expanded };
+}
+
+export function renderAgentOverlay(state: AgentOverlayState, width: number): string[] {
+	const lines: string[] = [];
+	const header = ` Agent Configuration (${state.entries.length} agents)`;
+	lines.push(truncate(header, width));
+	lines.push(truncate("─".repeat(Math.min(width, 60)), width));
+
+	if (state.entries.length === 0) {
+		lines.push(truncate(" No agents discovered.", width));
+		return lines;
+	}
+
+	const visible = state.entries.slice(state.scrollOffset, state.scrollOffset + state.maxVisible);
+
+	for (const [i, entry] of visible.entries()) {
+		const globalIndex = state.scrollOffset + i;
+		const isSelected = globalIndex === state.selectedIndex;
+		const isExpanded = state.expanded.has(globalIndex);
+		const cursor = isSelected ? "▸" : " ";
+		const disabled = entry.disabled ? " [disabled]" : "";
+		const model = entry.model ? ` (${entry.model})` : "";
+
+		const summary = `${cursor} ${sourceIcon(entry.source)} ${entry.name}${model}${disabled}`;
+		lines.push(truncate(summary, width));
+
+		if (isExpanded) {
+			const desc = `    ${entry.description}`;
+			lines.push(truncate(desc, width));
+			const meta: string[] = [`    source: ${sourceLabel(entry.source)}`];
+			if (entry.model) meta.push(`model: ${entry.model}`);
+			if (entry.thinking) meta.push(`thinking: ${entry.thinking}`);
+			if (entry.loadMode) meta.push(`loadMode: ${entry.loadMode}`);
+			if (entry.contextMode) meta.push(`context: ${entry.contextMode}`);
+			meta.push(`file: ${entry.filePath}`);
+			lines.push(truncate(meta.join(" · "), width));
+			lines.push(truncate("─".repeat(Math.min(width - 4, 50)), width));
+		}
+	}
+
+	if (state.scrollOffset + state.maxVisible < state.entries.length) {
+		const remaining = state.entries.length - state.scrollOffset - state.maxVisible;
+		lines.push(truncate(`  … +${remaining} more`, width));
+	}
+
+	return lines;
+}

package/src/ui/card-colors.ts

@@ -0,0 +1,139 @@
+/**
+ * Color utilities for pi-crew UI — background tinting and ANSI parsing.
+ *
+ * Ported from pi-diff's mixBg() / autoDeriveBgFromTheme() technique:
+ * derive subtle status-tinted backgrounds from the theme's foreground colors
+ * so crew cards stay readable across light/dark themes without hardcoding RGB.
+ *
+ * mixBg(base, accent, intensity) does a LINEAR interpolation:
+ *   result = base + (accent - base) * intensity
+ *
+ * Intensity tiers (per pi-diff research):
+ *   10-12% — subtle gutter/hint
+ *   15-18% — line background (visible but not loud)
+ *   30-35% — word-level emphasis (prominent)
+ */
+
+import { visibleWidth as visualWidth } from "../utils/visual.ts";
+import type { CrewTheme } from "./theme-adapter.ts";
+
+// ── ANSI parsing ────────────────────────────────────────────────────────
+
+interface Rgb {
+	r: number;
+	g: number;
+	b: number;
+}
+
+const ANSI_RGB_FG_RE = /^\x1b?\[?38;2;(\d+);(\d+);(\d+)m?$/;
+const ANSI_RGB_BG_RE = /^\x1b?\[?48;2;(\d+);(\d+);(\d+)m?$/;
+
+/** Parse a truecolor ANSI SGR sequence (e.g. "\x1b[38;2;255;100;50m") to RGB. */
+export function parseAnsiRgb(ansi: string | undefined | null): Rgb | null {
+	if (!ansi) return null;
+	const stripped = ansi.replace(/^\x1b?\[?/, "").replace(/m?$/, "");
+	const fgMatch = stripped.match(/^38;2;(\d+);(\d+);(\d+)$/);
+	const bgMatch = stripped.match(/^48;2;(\d+);(\d+);(\d+)$/);
+	const m = fgMatch ?? bgMatch;
+	if (!m) return null;
+	const r = Number(m[1]);
+	const g = Number(m[2]);
+	const b = Number(m[3]);
+	if (![r, g, b].every(Number.isFinite)) return null;
+	return { r, g, b };
+}
+
+// ── Color mixing ────────────────────────────────────────────────────────
+
+/** Linear-interpolate two RGB colors and emit a 48;2 (truecolor bg) SGR code. */
+export function mixBg(base: Rgb, accent: Rgb, intensity: number): string {
+	const r = Math.round(base.r + (accent.r - base.r) * intensity);
+	const g = Math.round(base.g + (accent.g - base.g) * intensity);
+	const b = Math.round(base.b + (accent.b - base.b) * intensity);
+	return `\x1b[48;2;${r};${g};${b}m`;
+}
+
+const BLACK: Rgb = { r: 0, g: 0, b: 0 };
+
+// ── Theme → background derivation ───────────────────────────────────────
+
+/**
+ * Resolve a subtle status-tinted background for a crew card interior.
+ *
+ * Reads the theme's fg color for the given status slot (success/error/border),
+ * mixes it into a dark base at low intensity (default 8%), and returns a bg SGR
+ * sequence. Returns "" if the theme exposes no fg ANSI (graceful — caller
+ * renders without background).
+ *
+ * @param theme       pi-crew theme adapter
+ * @param statusSlot  which status color to tint with ("success" | "error" | "borderAccent" | "border")
+ * @param intensity   0-1, how strong the tint is (default 0.08 = very subtle)
+ */
+export function deriveCardBackground(
+	theme: CrewTheme,
+	statusSlot: "success" | "error" | "borderAccent" | "border",
+	intensity = 0.08,
+): string {
+	// Prefer the theme's bg color as base (matches the card's surroundings).
+	let base = BLACK;
+	const themeAny = theme as unknown as {
+		getBgAnsi?: (slot: string) => string | undefined;
+		getFgAnsi?: (slot: string) => string | undefined;
+	};
+	if (themeAny.getBgAnsi) {
+		try {
+			const bg = themeAny.getBgAnsi("background");
+			const parsed = parseAnsiRgb(bg);
+			if (parsed) base = parsed;
+		} catch {
+			/* fall back to black */
+		}
+	}
+
+	// Get the accent from the theme's fg for the requested slot.
+	let accentRgb: Rgb | null = null;
+	if (themeAny.getFgAnsi) {
+		try {
+			accentRgb = parseAnsiRgb(themeAny.getFgAnsi(statusSlot));
+		} catch {
+			/* accent stays null */
+		}
+	}
+	if (!accentRgb) return ""; // can't derive — render without bg tint
+
+	return mixBg(base, accentRgb, intensity);
+}
+
+// ── Helpers for padding lines with a background ─────────────────────────
+
+const RESET = "\x1b[0m";
+
+/** Strip ANSI SGR codes then compute the VISUAL width (Unicode-aware).
+ * Round 23 (BUG 2): previously this used `.length` (UTF-16 code units), which
+ * under-counts CJK/emoji → wrong padding → broken frame borders in crew cards.
+ * Delegate to the canonical Unicode-aware visualWidth from utils/visual.ts
+ * used by every other renderer. */
+export function visibleWidth(text: string): number {
+	return visualWidth(text);
+}
+
+/**
+ * Pad a line to `targetWidth` and apply `bgAnsi` as the background for the
+ * full visible width (including any trailing padding spaces).
+ *
+ * `bgAnsi` should be a 48;2 (truecolor bg) SGR sequence from mixBg().
+ * The function inserts the bg code after any existing leading SGR, fills the
+ * content, pads to width, then resets. This ensures the entire row's background
+ * is tinted — not just the characters.
+ */
+export function padWithBackground(line: string, targetWidth: number, bgAnsi: string): string {
+	if (!bgAnsi) {
+		// No background — just space-pad (preserving any existing styling).
+		const width = visibleWidth(line);
+		return width >= targetWidth ? line : line + " ".repeat(targetWidth - width);
+	}
+	const width = visibleWidth(line);
+	const pad = width >= targetWidth ? "" : " ".repeat(targetWidth - width);
+	// Re-apply bg after a leading reset if present, otherwise prepend.
+	return `${bgAnsi}${line}${pad}${RESET}`;
+}

package/src/ui/crew-footer.ts

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,112 @@
+import { pad, truncate } from "../utils/visual.ts";
+import { keyOf } from "./key-utils.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" || keyOf(data) === "down") {
+			this.setSelectedIndex(this.selectedIndex + 1);
+			return;
+		}
+		if (data === "k" || keyOf(data) === "up") {
+			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/dashboard-panes/agents-pane.ts

@@ -0,0 +1,164 @@
+import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
+import { type LiveAgentHandle, listLiveAgents, listLiveAgentsByWorkspace } from "../../runtime/live-agent-manager.ts";
+import { formatCost } from "../../state/usage.ts";
+import { visibleWidth } from "../../utils/visual.ts";
+import { computeLiveDurationMs } from "../live-duration.ts";
+import type { RunDashboardOptions } from "../run-dashboard.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+import { spinnerFrame } from "../spinner.ts";
+import { iconForStatus } from "../status-colors.ts";
+
+/**
+ * Fixed visible widths for the per-agent numeric metrics (finding V-1).
+ * Right-aligning each field to a constant width stops the right edge of the
+ * stats block from jittering every tick as values change width
+ * (e.g. `9.9s`→`10.0s`, `950`→`1.0k`, `$0.9`→`$1.0`).
+ */
+const TOKENS_METRIC_WIDTH = 5; // `1.2k`, `12.3k`, `123`
+const COST_METRIC_WIDTH = 7; // `$0.0500`, `$1.50`
+const DURATION_METRIC_WIDTH = 6; // `3.0s`, `59.9s`, `120.0s`
+
+/**
+ * Width-aware right-align (padStart) for a numeric metric so its column stays
+ * stable across ticks. Uses `visibleWidth` so wide/CJK glyphs never misalign
+ * the padding. Values wider than `width` are returned verbatim (no truncation)
+ * so outliers overflow gracefully instead of crashing the render.
+ */
+function alignMetric(value: string, width: number): string {
+	const gap = width - visibleWidth(value);
+	return gap > 0 ? " ".repeat(gap) + value : value;
+}
+
+/**
+ * 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)"];
+	// Filter live agents by workspaceId for session isolation
+	const allLive = options.workspaceId ? listLiveAgentsByWorkspace(options.workspaceId) : listLiveAgents();
+	const liveForRun = allLive.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 + cost + duration
+		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(alignMetric(tok, TOKENS_METRIC_WIDTH));
+		}
+		// Per-agent cost (Round 17 BS-1): the data is already on task.usage.cost;
+		// surface it live so the user sees $ burn per agent during a run.
+		if (agent.usage?.cost && agent.usage.cost > 0) {
+			stats.push(alignMetric(formatCost(agent.usage.cost), COST_METRIC_WIDTH));
+		}
+		if (liveHandle) {
+			// Round 23 (BUG 1): the duration math here was naive —
+			//   (completedAtMs ?? Date.now()) - startedAtMs
+			// which produced a giant NEGATIVE duration whenever startedAtMs was
+			// 0/undefined/bad, or a race set completedAtMs < startedAtMs. This
+			// fired for EVERY running live agent in the dashboard. Use the shared,
+			// validated computeLiveDurationMs (mirrors widget-formatters.ts).
+			const ms = computeLiveDurationMs(liveHandle.activity);
+			stats.push(alignMetric(`${(ms / 1000).toFixed(1)}s`, DURATION_METRIC_WIDTH));
+			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(alignMetric(`${(ms / 1000).toFixed(1)}s`, DURATION_METRIC_WIDTH));
+		}
+
+		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;
+}