pi-crew 0.11.0 → 0.11.2

package/src/ui/tool-renderers/index.ts

@@ -1,28 +1,72 @@
 /**
- * Tool renderer registry — visually rich rendering for team & agent tools.
+ * Tool renderer registry — RAIL design language (R3, 2026-09-16).
  *
- * Uses box-drawing chars, progress bars, colored badges, and structured
- * layouts to create a distinctly different TUI appearance.
- * Uses visibleWidth() for ANSI-aware padding so borders align correctly.
+ * Visual grammar (a full redesign; the previous rounded-box + `◀ BADGE ▶`
+ * frame language is gone):
+ *
+ *   ┏ ┃ ┗   a vertical RAIL down the left edge marks one tool call.
+ *           `┏` opens the card (call half), `┃` continues it (streaming /
+ *           expanded rows), `┗` closes it with the outcome summary and the
+ *           end cap. The rail colour carries status: neutral while idle,
+ *           accent while streaming, green on success, red on failure.
+ *
+ *   `NAME ▸ SUBJECT`   identity canopy: `CREW ▸ implementation`,
+ *                      `AGENT ▸ explorer`, `STATUS ▸ _ui_demo`.
+ *
+ *   `······`           dot leaders connect the left and right segments of a
+ *                      line (metrics ↔ elapsed/expand-chord hint), and shrink to a
+ *                      two-space gap when the column is too narrow.
+ *
+ *   `▕████▎░░▏`        gauge bar with EIGHTH-BLOCK sub-cell precision, so a
+ *                      narrow column still shows meaningful progress.
+ *
+ * Cards are width-deferred through AdaptiveCard: the builder receives the
+ * real render width, so nothing is "baked" at an assumed terminal size and
+ * no line ever wraps into a torn frame.
  */
 
 import { type Container, Text, visibleWidth } from "@earendil-works/pi-tui";
 import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
-import { truncateToWidth } from "../../utils/visual.ts";
+import { AdaptiveCard } from "../adaptive-card.ts";
 import type { CrewComponent } from "../component.ts";
-import { formatDuration, formatTokens, truncLine } from "../format-helpers.ts";
-import { spinnerFrame } from "../spinner.ts";
+import { formatCount, formatDuration, formatTokens, truncLine } from "../format-helpers.ts";
+import {
+	ACTIVE,
+	dedupeAgentLabel,
+	gaugeBar,
+	PI_EXPAND_CHORD,
+	RAIL,
+	type RailSlot,
+	railLeaders,
+	railLine,
+	scanGauge,
+	shortId,
+	statusBadge,
+	statusIcon,
+	statusSlot,
+	truncVisual,
+} from "../rail.ts";
+import { spinnerClockNow, spinnerFrame } from "../spinner.ts";
 import type { CrewTheme } from "../theme-adapter.ts";
+import { parseCompactToolProgress } from "../tool-progress-formatter.ts";
 import { briefToolResult, isBrief } from "./brief-mode.ts";
 
+// statusIcon stays part of this module's public API (team-tool.ts imports it
+// from here); the implementation moved to the shared RAIL module.
+export { statusIcon };
+
 // ── Types ──────────────────────────────────────────────────────────────
 
 export interface ToolRenderContext {
 	expanded: boolean;
 	lastComponent?: Container;
+	/** Pi's ToolRenderContext carries no width — the render width is real. */
 	width?: number;
 	isPartial?: boolean;
 	isError?: boolean;
+	/** Pi signals (available since R1 audit): args may still be streaming in. */
+	argsComplete?: boolean;
+	executionStarted?: boolean;
 }
 
 export interface ToolRenderer {
@@ -30,7 +74,7 @@ export interface ToolRenderer {
 	renderResult(result: Record<string, unknown>, options: unknown, theme: CrewTheme, ctx: ToolRenderContext): Component;
 }
 
-export type Component = Container | Text;
+export type Component = Container | Text | AdaptiveCard;
 
 // PR-G3 (UI-3): `Container | Text` structurally satisfies the shared
 // CrewComponent contract — both come from @earendil-works/pi-tui and each
@@ -39,433 +83,404 @@ export type Component = Container | Text;
 // the exported union type or any behavior.
 type _AssertComponentIsCrewComponent = Container extends CrewComponent ? (Text extends CrewComponent ? true : never) : never;
 
-// ── ANSI-aware padding ─────────────────────────────────────────────────
-
-/** Pad a string (which may contain ANSI codes) to a target VISUAL width. */
-function padVisual(str: string, targetWidth: number): string {
-	const vw = visibleWidth(str);
-	if (vw >= targetWidth) return str;
-	return str + " ".repeat(targetWidth - vw);
-}
+// ── RAIL primitives ────────────────────────────────────────────────────
+//
+// Rail glyphs, leaders, gauge, status glyphs and the width helpers now live in
+// the shared `src/ui/rail.ts` (RAIL design system, 2026-09-16) so every
+// pi-crew surface draws from ONE source instead of each re-declaring `┏ ┃ ┗`.
+// The tool-card-specific pieces stay here: the canopy composition (CREW /
+// AGENT / STATUS) and the status→slot choice for the OPEN half of a card.
 
-/** Truncate a string (which may contain ANSI codes) to a target VISUAL width. */
-function truncVisual(str: string, maxWidth: number): string {
-	if (visibleWidth(str) <= maxWidth) return str;
-	// Round 23 (BUG 3): previously used String.slice(0, maxWidth) which counts
-	// UTF-16 code units — for CJK that overflows the card by up to 2x, and for
-	// emoji it splits a surrogate pair (U+FFFD). Use the grapheme/ANSI-aware
-	// truncateToWidth with empty ellipsis (the caller appends its own '…').
-	return truncateToWidth(str, maxWidth, "");
-}
-
-// ── Visual primitives ──────────────────────────────────────────────────
-
-/** Status icon with color */
-function statusBadge(status: string, theme: CrewTheme): string {
-	switch (status) {
-		case "completed":
-			return theme.fg("success", "●");
-		case "failed":
-		case "cancelled":
-			return theme.fg("error", "✖");
-		case "running":
-			return theme.fg("warning", "◉");
-		default:
-			return theme.fg("dim", "○");
-	}
+/** Rail colour for the OPEN half — the call was made; outcome unknown yet. */
+function railOpenSlot(ctx: ToolRenderContext): RailSlot {
+	if (ctx.isError) return "error";
+	if (ctx.isPartial) return "borderAccent";
+	return "border";
 }
 
-/** Status icon — compact */
-export function statusIcon(status: string, theme: CrewTheme): string {
-	switch (status) {
-		case "completed":
-			return theme.fg("success", "✓");
-		case "failed":
-		case "cancelled":
-			return theme.fg("error", "✗");
-		case "running":
-			return theme.fg("warning", "⟳");
-		default:
-			return theme.fg("dim", "○");
-	}
+/** Rail colour for the CLOSE half — the outcome is known here. */
+function railCloseSlot(status: string, ctx: ToolRenderContext): RailSlot {
+	if (ctx.isError) return "error";
+	return statusSlot(status);
 }
 
-/** Short run ID */
-function shortId(id: string | undefined): string {
-	return id ? id.slice(-8) : "????????";
-}
+// ── Identity canopy ────────────────────────────────────────────────────
 
-/** Border color based on status */
-function borderColorForStatus(status: string): "success" | "error" | "border" {
-	switch (status) {
-		case "completed":
-			return "success";
-		case "failed":
-		case "cancelled":
-			return "error";
-		default:
-			return "border";
-	}
+/**
+ * `┏ CREW ▸ implementation` / `┏ STATUS ▸ _ui_demo` / `┏ AGENT ▸ explorer`.
+ * `action === "run"` promotes the subject (team) and the canopy word becomes
+ * the brand; for any other action the action IS the identity.
+ */
+function canopy(args: {
+	action?: string;
+	team?: string;
+	agentName?: string;
+	runId?: string;
+	theme: CrewTheme;
+	ctx: ToolRenderContext;
+	budget: number;
+}): string {
+	const { action = "", team, agentName, runId, theme, ctx, budget } = args;
+	const isRun = !action || action === "run";
+	const word = agentName !== undefined ? "AGENT" : isRun ? "CREW" : (action || "…").toUpperCase();
+	const subject = agentName !== undefined ? agentName : isRun ? (team ?? "") : (team ?? shortRun(runId));
+	// Subject rules: a real subject always prints; while args are still
+	// streaming a `▸ …` placeholder signals "not parsed yet"; a COMPLETE call
+	// with nothing to name (e.g. `team action=list`) prints the word alone —
+	// a dangling chevron there would read as a bug.
+	const streamingArgs = ctx.argsComplete === false;
+	const tail = subject
+		? ` ${theme.fg("dim", ACTIVE)} ${theme.fg("toolTitle", theme.bold(subject))}`
+		: streamingArgs
+			? ` ${theme.fg("dim", ACTIVE)} ${theme.fg("toolTitle", theme.bold("…"))}`
+			: "";
+	const label = `${theme.fg("accent", theme.bold(word))}${tail}`;
+	return railLine(RAIL.open, railOpenSlot(ctx), label, theme, budget);
 }
 
-/** Build a visual progress bar: ██████░░░░░░ 60% */
-function progressBar(ratio: number, barWidth: number, theme: CrewTheme): string {
-	const clamped = Math.max(0, Math.min(1, ratio));
-	const filled = Math.round(clamped * barWidth);
-	const empty = barWidth - filled;
-	const bar = theme.fg("success", "█".repeat(filled)) + theme.fg("dim", "░".repeat(empty));
-	const pct = theme.fg("text", ` ${Math.round(clamped * 100)}%`.padStart(5));
-	return bar + pct;
+function shortRun(runId: string | undefined): string {
+	return runId ? shortId(runId) : "";
 }
 
-// ── Frame builder ──────────────────────────────────────────────────────
+// ── Shared line builders ───────────────────────────────────────────────
 
-/** Create a rounded-corner framed card.
- *  With renderShell="self", Pi no longer wraps in Box(1,1).
- *  Frame uses full totalWidth.
- */
-import { deriveCardBackground, padWithBackground } from "../card-colors.ts";
-
-/** Create a rounded-corner framed card.
- *  With renderShell="self", Pi no longer wraps in Box(1,1).
- *  Frame uses full totalWidth.
- *  When bgSlot is provided, the interior is filled with a subtle status-tinted
- *  background derived from the theme (mixBg at 8% intensity).
- */
-function buildFrame(
-	contentLines: string[],
-	totalWidth: number,
-	theme: CrewTheme,
-	borderSlot: "success" | "error" | "border" | "borderAccent" = "border",
-	bgSlot?: "success" | "error" | "border" | "borderAccent",
-): string {
-	const frameW = totalWidth - 2; // available after Box(1,1) padding
-	const innerW = frameW - 2; // │ chars
-	const top = theme.fg(borderSlot, `╭${"─".repeat(innerW)}╮`);
-	const bottom = theme.fg(borderSlot, `╰${"─".repeat(innerW)}╯`);
-	const v = theme.fg(borderSlot, "│");
-	const bg = bgSlot ? deriveCardBackground(theme, bgSlot) : "";
-
-	const lines: string[] = [top];
-	for (const line of contentLines) {
-		const padded = bg ? padWithBackground(line, innerW, bg) : padVisual(line, innerW);
-		lines.push(v + padded + v);
-	}
-	lines.push(bottom);
-	return lines.join("\n");
+/** Dim preview line (goals, prompts, output snippets) with visual truncation. */
+function previewLine(glyph: string, slot: RailSlot, text: string, theme: CrewTheme, budget: number, shorten = false): string {
+	const flat = (shorten ? shortenPath(text) : text).replace(/\n/g, " ");
+	const maxLen = budget - 2;
+	const body = visibleWidth(flat) > maxLen ? `${truncVisual(flat, maxLen - 1)}…` : flat;
+	return railLine(glyph, slot, theme.fg("dim", body), theme, budget);
 }
 
-/** Build frame TOP: top border + content lines, NO bottom border.
- *  Pairs with buildFrameBottom() so renderCall + renderResult merge into ONE frame. */
-function buildFrameTop(
-	contentLines: string[],
-	totalWidth: number,
-	theme: CrewTheme,
-	borderSlot: "success" | "error" | "border" | "borderAccent" = "border",
-	bgSlot?: "success" | "error" | "border" | "borderAccent",
-): string {
-	const frameW = totalWidth - 2;
-	const innerW = frameW - 2;
-	const top = theme.fg(borderSlot, `╭${"─".repeat(innerW)}╮`);
-	const v = theme.fg(borderSlot, "│");
-	const bg = bgSlot ? deriveCardBackground(theme, bgSlot) : "";
-	const lines: string[] = [top];
-	for (const line of contentLines) {
-		const padded = bg ? padWithBackground(line, innerW, bg) : padVisual(line, innerW);
-		lines.push(v + padded + v);
-	}
-	return lines.join("\n");
-}
-
-/** Build frame BOTTOM: content lines + bottom border, NO top border.
- *  Pairs with buildFrameTop() so renderCall + renderResult merge into ONE frame. */
-function buildFrameBottom(
-	contentLines: string[],
-	totalWidth: number,
-	theme: CrewTheme,
-	borderSlot: "success" | "error" | "border" | "borderAccent" = "border",
-	bgSlot?: "success" | "error" | "border" | "borderAccent",
-): string {
-	const frameW = totalWidth - 2;
-	const innerW = frameW - 2;
-	const v = theme.fg(borderSlot, "│");
-	const bottom = theme.fg(borderSlot, `╰${"─".repeat(innerW)}╯`);
-	const bg = bgSlot ? deriveCardBackground(theme, bgSlot) : "";
-	const lines: string[] = [];
-	for (const line of contentLines) {
-		const padded = bg ? padWithBackground(line, innerW, bg) : padVisual(line, innerW);
-		lines.push(v + padded + v);
-	}
-	lines.push(bottom);
-	return lines.join("\n");
-}
-
-/** Derive border color from context so renderCall's top matches renderResult's bottom. */
-function borderFromContext(ctx: ToolRenderContext): "success" | "error" | "borderAccent" {
-	if (ctx.isPartial) return "borderAccent";
-	if (ctx.isError) return "error";
-	return "success";
+/** `n/m · pct%` tally shared by streaming and expanded gauges. */
+function tallyText(completed: number, total: number, theme: CrewTheme): string {
+	const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
+	return theme.fg("muted", `${completed}/${total} · ${pct}%`);
 }
 
 // ── Team Tool Renderer ─────────────────────────────────────────────────
 
 export const teamToolRenderer: ToolRenderer = {
 	renderCall(args, theme, ctx) {
-		const action = (args.action as string) ?? "";
-		const goal = (args.goal as string) ?? "";
-		const team = args.team as string | undefined;
-		const w = ctx.width || process.stdout.columns || 116;
-		const innerW = w - 4;
-
-		const contentLines: string[] = [];
-
-		// Header: action badge + team name
-		const actionBadge = theme.fg("accent", `◀ ${action.toUpperCase()} ▶`);
-		const teamLabel = team ? `  ${theme.fg("dim", `via ${team}`)}` : "";
-		const header = ` ${actionBadge}${teamLabel}`;
-		contentLines.push(padVisual(header, innerW));
-
-		// Goal preview (P5: shorten paths)
-		if (goal) {
-			const maxLen = innerW - 2;
-			const preview = shortenPath(goal.replace(/\n/g, " "));
-			const previewText = visibleWidth(preview) > maxLen ? truncVisual(preview, maxLen - 1) + "…" : preview;
-			contentLines.push(padVisual(` ${theme.fg("dim", previewText)}`, innerW));
-		}
-
-		return new Text(buildFrameTop(contentLines, w, theme, borderFromContext(ctx), borderFromContext(ctx)), 0, 0);
+		return new AdaptiveCard(
+			(w) => {
+				const budget = w - 2;
+				const action = (args.action as string) ?? "";
+				const goal = (args.goal as string) ?? "";
+				const team = args.team as string | undefined;
+				const lines = [canopy({ action, team, runId: (args.runId as string) ?? (args.run as string), theme, ctx, budget })];
+				if (goal) lines.push(previewLine(RAIL.body, "border", goal, theme, budget, true));
+				return lines.join("\n");
+			},
+			(text) => theme.fg("error", text),
+		);
 	},
 
 	renderResult(result, _options, theme, ctx) {
 		try {
-			const text = renderTeamResult(result, _options, theme, ctx);
-			return new Text(text, 0, 0);
-		} catch {
-			return new Text(statusIcon("completed", theme) + " done", 0, 0);
+			return new AdaptiveCard(
+				(w) => renderTeamResult(result, _options, theme, ctx, w),
+				(text) => theme.fg("error", text),
+			);
+		} catch (e) {
+			// FAIL-VISIBLE: a render bug or an unexpected payload shape must
+			// never masquerade as a successful card.
+			const msg = e instanceof Error ? e.message : String(e);
+			return new Text(theme.fg("error", `✖ crew render error: ${truncLine(msg, 56)}`), 0, 0);
 		}
 	},
 };
 
-function renderTeamResult(result: Record<string, unknown>, options: unknown, theme: CrewTheme, ctx: ToolRenderContext): string {
+function renderTeamResult(result: Record<string, unknown>, options: unknown, theme: CrewTheme, ctx: ToolRenderContext, w: number): string {
 	const d = (result.details ?? result) as Record<string, unknown>;
 	const records = (d.agentRecords ?? d.results) as CrewAgentRecord[] | undefined;
 	const action = typeof d.action === "string" ? d.action : "";
 	const status = typeof d.status === "string" ? d.status : "";
 	const runId = typeof d.runId === "string" ? d.runId : "";
-	const w = ctx.width || process.stdout.columns || 116;
-	const innerW = w - 4;
-	const bColor = borderColorForStatus(status);
-	const contentLines: string[] = [];
+	const teamName = typeof d.team === "string" ? d.team : "";
+	const budget = w - 2;
+	const closeSlot = railCloseSlot(status, ctx);
 
-	// isPartial = tool still streaming — show LIVE progress
+	// ── Streaming (partial result, collapsed view) ──
 	const isPartial = (options as Record<string, unknown>)?.isPartial === true;
 	if (isPartial && !ctx.expanded) {
-		const content = extractContentText(result?.content);
-		const parsed = parseStreamingProgress(content);
-
+		const parsed = parseStreamingProgress(extractContentText(result?.content));
 		if (parsed) {
-			const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-			const frameIdx = Math.floor(Date.now() / 80) % spinnerFrames.length;
-			const spinner = theme.fg("accent", spinnerFrames[frameIdx]!);
-			const elapsed = formatDuration(parsed.elapsedMs);
+			const spinner = theme.fg("accent", spinnerFrame(String(spinnerClockNow())));
+			const elapsed = theme.fg("dim", formatDuration(parsed.elapsedMs));
+			const lines: string[] = [];
 
 			if (parsed.completed != null && parsed.total != null && parsed.total > 0) {
-				// ── Real task progress ──
 				const ratio = parsed.completed / parsed.total;
-				const barW = Math.min(innerW - 22, 30);
-				const bar = progressBar(ratio, barW, theme);
-				const count = theme.fg("muted", ` ${parsed.completed}/${parsed.total}`);
-				contentLines.push(
-					padVisual(` ${spinner} ${theme.fg("toolTitle", theme.bold("crew run"))}  ${theme.fg("dim", elapsed)}`, innerW),
-				);
-				contentLines.push(padVisual(`   ${bar}${count}`, innerW));
-				if (parsed.activeAgent) contentLines.push(padVisual(`   ${theme.fg("dim", parsed.activeAgent)}`, innerW));
+				const barW = Math.min(Math.max(8, budget - 26), 32);
+				const left = `${spinner} ${tallyText(parsed.completed, parsed.total, theme)} ${gaugeBar(ratio, barW, theme)}`;
+				lines.push(railLine(RAIL.body, "borderAccent", railLeaders(left, elapsed, budget, theme), theme, budget));
+				if (parsed.activeAgent) {
+					const dot = theme.fg("accent", spinnerFrame(parsed.activeAgent));
+					const label = dedupeAgentLabel(parsed.activeAgent);
+					lines.push(railLine(RAIL.body, "border", `  ${dot} ${theme.fg("dim", label)}`, theme, budget));
+				}
 			} else {
-				// ── Starting phase — animated indeterminate bar ──
-				const barW = Math.min(innerW - 20, 30);
-				const scanBar = renderScanBar(barW, parsed.elapsedMs, theme);
-				contentLines.push(padVisual(` ${spinner} ${theme.fg("muted", "crew starting")}  ${theme.fg("dim", elapsed)}`, innerW));
-				contentLines.push(padVisual(`   ${scanBar}`, innerW));
+				const barW = Math.min(Math.max(8, budget - 24), 32);
+				const left = `${spinner} ${theme.fg("muted", "starting")} ${scanGauge(barW, parsed.elapsedMs, theme)}`;
+				lines.push(railLine(RAIL.body, "borderAccent", railLeaders(left, elapsed, budget, theme), theme, budget));
 			}
-		} else if (content) {
-			const preview = truncLine(content.split("\n").filter(Boolean).pop() ?? "", innerW - 4);
-			contentLines.push(padVisual(` ${theme.fg("warning", "◉")} ${theme.fg("dim", preview)}`, innerW));
+			return lines.join("\n");
 		}
-
-		if (contentLines.length > 0) {
-			return buildFrameBottom(contentLines, w, theme, "borderAccent", "borderAccent");
+		const fallback = extractContentText(result?.content).split("\n").filter(Boolean).pop();
+		if (fallback) {
+			return railLine(RAIL.body, "borderAccent", `${theme.fg("warning", "◉")} ${theme.fg("dim", fallback)}`, theme, budget);
 		}
 	}
 
-	// Brief mode: compact summary (still framed)
-	// But NOT for action=run — those always get progress bar + metrics
+	// ── Brief mode: single end-cap line (never for action=run) ──
 	if (isBrief() && !ctx.expanded && action !== "run") {
 		const briefText = briefToolResult("team", result as { content?: unknown[] }, theme);
-		contentLines.push(padVisual(` ${briefText}`, innerW));
-		return buildFrameBottom(contentLines, w, theme, bColor, bColor);
+		return railLine(RAIL.close, closeSlot, `${briefText}`, theme, budget);
 	}
 
+	// ── Closed card ──
 	if (!ctx.expanded) {
-		// ── Collapsed: compact framed card ──
 		if (action === "run" && records?.length) {
-			appendRunCard(contentLines, records, status, runId, theme, innerW);
-		} else if (action === "run") {
-			const m = d.metrics as Metrics | undefined;
-			if (m) {
-				appendMetricsCard(contentLines, m, status, runId, theme, innerW);
-			} else {
-				appendSimpleCard(contentLines, status, runId, theme, innerW);
-			}
-		} else {
-			appendSimpleCard(contentLines, status, runId, theme, innerW);
+			return railLine(RAIL.close, closeSlot, `${runCap(records, status, teamName, theme, budget)}`, theme, budget);
 		}
-	} else {
-		// ── Expanded: detailed card ──
-		if (action === "run" && records?.length) {
-			appendExpandedRun(contentLines, records, status, runId, theme, w, innerW);
-		} else if (action === "run") {
+		if (action === "run") {
 			const m = d.metrics as Metrics | undefined;
-			appendExpandedMetrics(contentLines, m, status, runId, theme, w, innerW);
-		} else {
-			const text = extractContentText(result?.content);
-			contentLines.push(padVisual(` ${text.slice(0, innerW - 2)}`, innerW));
+			return railLine(RAIL.close, closeSlot, `${metricsCap(m, status, theme)}`, theme, budget);
 		}
+		const badge = statusBadge(status, theme);
+		const label = [status || "done", runId ? shortId(runId) : ""].filter(Boolean).join(" · ");
+		return railLine(RAIL.close, closeSlot, `${badge} ${theme.fg("text", label)}`, theme, budget);
 	}
 
-	return buildFrameBottom(contentLines, w, theme, bColor, bColor);
+	// ── Expanded card ──
+	const lines: string[] = [];
+	if (action === "run" && records?.length) {
+		const completed = records.filter((r) => r.status === "completed").length;
+		const ratio = records.length > 0 ? completed / records.length : 0;
+		const barW = Math.min(Math.max(8, budget - 26), 40);
+		lines.push(
+			railLine(RAIL.body, "border", `${gaugeBar(ratio, barW, theme)} ${tallyText(completed, records.length, theme)}`, theme, budget),
+		);
+		for (const r of records) {
+			lines.push(railLine(RAIL.body, "border", agentRow(r, theme, budget), theme, budget));
+			const usage = usageRow(r, theme, budget);
+			if (usage) lines.push(railLine(RAIL.body, "border", usage, theme, budget));
+		}
+		const duration = computeTotalDuration(records);
+		const tokens = computeTotalTokens(records);
+		const cost = computeTotalCost(records);
+		const tail = [teamName, formatDuration(duration), `${formatTokens(tokens)} tok`, cost > 0 ? `$${cost.toFixed(3)}` : ""]
+			.filter(Boolean)
+			.join(" · ");
+		lines.push(
+			railLine(
+				RAIL.close,
+				closeSlot,
+				railLeaders(theme.fg("muted", tail), theme.fg("dim", PI_EXPAND_CHORD), budget, theme),
+				theme,
+				budget,
+			),
+		);
+		return lines.join("\n");
+	}
+	if (action === "run") {
+		const m = d.metrics as Metrics | undefined;
+		if (m?.taskCount) {
+			const ratio = (m.completedCount ?? 0) / m.taskCount;
+			const barW = Math.min(Math.max(8, budget - 26), 40);
+			lines.push(
+				railLine(
+					RAIL.body,
+					"border",
+					`${gaugeBar(ratio, barW, theme)} ${tallyText(m.completedCount ?? 0, m.taskCount, theme)}`,
+					theme,
+					budget,
+				),
+			);
+		}
+		const parts: string[] = [];
+		if (m?.durationMs) parts.push(formatDuration(m.durationMs));
+		if (m?.totalTokens) parts.push(`${formatTokens(m.totalTokens)} tok`);
+		lines.push(railLine(RAIL.close, closeSlot, `${theme.fg("muted", parts.join(" · ") || "done")}`, theme, budget));
+		return lines.join("\n");
+	}
+	// Non-run action, expanded: the raw payload.
+	lines.push(previewLine(RAIL.body, "border", extractContentText(result?.content), theme, budget));
+	lines.push(railLine(RAIL.close, closeSlot, "", theme, budget));
+	return lines.join("\n");
+}
+
+/** End-cap for a finished run: `● 5/5 · implementation · 24m4s · 103k tok · $0.204 ···· ctrl+o`. */
+function runCap(records: CrewAgentRecord[], status: string, teamName: string, theme: CrewTheme, budget: number): string {
+	const completed = records.filter((r) => r.status === "completed").length;
+	const duration = computeTotalDuration(records);
+	const tokens = computeTotalTokens(records);
+	const cost = computeTotalCost(records);
+	const badge = statusBadge(status, theme);
+	const parts = [
+		`${completed}/${records.length}`,
+		teamName,
+		formatDuration(duration),
+		`${formatTokens(tokens)} tok`,
+		cost > 0 ? `$${cost.toFixed(3)}` : "",
+	].filter(Boolean);
+	return railLeaders(`${badge} ${theme.fg("text", parts.join(" · "))}`, theme.fg("dim", PI_EXPAND_CHORD), budget, theme);
+}
+
+function metricsCap(m: Metrics | undefined, status: string, theme: CrewTheme): string {
+	const badge = statusBadge(status, theme);
+	const parts: string[] = [];
+	if (m?.completedCount != null && m.taskCount) parts.push(`${m.completedCount}/${m.taskCount}`);
+	if (m?.durationMs) parts.push(formatDuration(m.durationMs));
+	if (m?.totalTokens) parts.push(`${formatTokens(m.totalTokens)} tok`);
+	if (m?.totalCost) parts.push(`$${m.totalCost.toFixed(3)}`);
+	return `${badge} ${theme.fg("text", parts.join(" · ") || status || "done")}`;
+}
+
+/** `✓ explorer (gpt-5) · 2m1s` */
+function agentRow(r: CrewAgentRecord, theme: CrewTheme, budget: number): string {
+	const icon = statusIcon(r.status, theme);
+	const role = theme.fg("toolTitle", theme.bold(r.role || r.agent || "agent"));
+	const model = r.model ? theme.fg("dim", ` (${r.model.split("/").at(-1)})`) : "";
+	const tools = formatCount(r.toolUses ?? r.progress?.toolCount ?? 0, "tool");
+	const dur = r.startedAt ? formatDuration(computeRecordDuration(r)) : "";
+	return `${icon} ${role}${model} ${theme.fg("dim", [tools, dur].filter(Boolean).join(" · "))}`;
+}
+
+/** `   ↑12k ↓4.1k $0.031` (omitted when the agent reported no usage). */
+function usageRow(r: CrewAgentRecord, theme: CrewTheme, budget: number): string | undefined {
+	const usage = r.usage;
+	const parts: string[] = [];
+	if (usage?.input) parts.push(theme.fg("dim", `↑${formatTokens(usage.input)}`));
+	if (usage?.output) parts.push(theme.fg("dim", `↓${formatTokens(usage.output)}`));
+	if (usage?.cost) parts.push(theme.fg("dim", `$${usage.cost.toFixed(3)}`));
+	return parts.length ? `  ${parts.join(" ")}` : undefined;
 }
 
 // ── Agent Tool Renderer ────────────────────────────────────────────────
 
 export const agentToolRenderer: ToolRenderer = {
 	renderCall(args, theme, ctx) {
-		const agentName = (args.agent as string) ?? (args.subagent_type as string) ?? "";
-		const prompt = (args.prompt ?? args.task ?? "") as string;
-		const w = ctx.width || process.stdout.columns || 116;
-		const innerW = w - 4;
-
-		const contentLines: string[] = [];
-		const badge = theme.fg("accent", `◀ AGENT ▶`);
-		const nameTag = theme.fg("toolTitle", theme.bold(agentName));
-		contentLines.push(padVisual(` ${badge}  ${nameTag}`, innerW));
-
-		if (prompt) {
-			const maxLen = innerW - 2;
-			const preview = prompt.replace(/\n/g, " ");
-			const previewText = visibleWidth(preview) > maxLen ? truncVisual(preview, maxLen - 1) + "…" : preview;
-			contentLines.push(padVisual(` ${theme.fg("dim", previewText)}`, innerW));
-		}
-
-		return new Text(buildFrameTop(contentLines, w, theme, borderFromContext(ctx), borderFromContext(ctx)), 0, 0);
+		return new AdaptiveCard(
+			(w) => {
+				const budget = w - 2;
+				const agentName = (args.agent as string) ?? (args.subagent_type as string) ?? "";
+				const prompt = (args.prompt ?? args.task ?? "") as string;
+				const lines = [canopy({ agentName, theme, ctx, budget })];
+				if (prompt) lines.push(previewLine(RAIL.body, "border", prompt, theme, budget));
+				return lines.join("\n");
+			},
+			(text) => theme.fg("error", text),
+		);
 	},
 
 	renderResult(result, _options, theme, ctx) {
 		try {
-			const text = renderAgentResult(result, _options, theme, ctx);
-			return new Text(text, 0, 0);
-		} catch {
-			return new Text(statusIcon("completed", theme) + " agent done", 0, 0);
+			return new AdaptiveCard(
+				(w) => renderAgentResult(result, _options, theme, ctx, w),
+				(text) => theme.fg("error", text),
+			);
+		} catch (e) {
+			// FAIL-VISIBLE — mirror the team renderer's error card.
+			const msg = e instanceof Error ? e.message : String(e);
+			return new Text(theme.fg("error", `✖ agent render error: ${truncLine(msg, 56)}`), 0, 0);
 		}
 	},
 };
 
-function renderAgentResult(result: Record<string, unknown>, options: unknown, theme: CrewTheme, ctx: ToolRenderContext): string {
+function renderAgentResult(result: Record<string, unknown>, options: unknown, theme: CrewTheme, ctx: ToolRenderContext, w: number): string {
 	const d = (result.details ?? result) as Record<string, unknown>;
 	const results = d.results as Array<Record<string, unknown>> | undefined;
-	const w = ctx.width || process.stdout.columns || 116;
-	const innerW = w - 4;
+	const budget = w - 2;
 	const status = ((d.status ?? (results?.[0] as Record<string, unknown>)?.status ?? "") as string) || "completed";
-	const bColor: "success" | "error" | "border" = status === "completed" ? "success" : status === "failed" ? "error" : "border";
-
-	const contentLines: string[] = [];
+	const closeSlot = railCloseSlot(status, ctx);
 
-	// isPartial = agent still running
+	// ── Streaming ──
 	const isPartial = (options as Record<string, unknown>)?.isPartial === true;
 	if (isPartial && !ctx.expanded) {
-		const spinner = theme.fg("accent", spinnerFrame(d.agentId as string));
-		const parts: string[] = [theme.fg("muted", "working")];
-
-		// Extract progress from onUpdate content (formatCompactToolProgress output)
+		const name = (d.agentName as string) ?? (d.agentId as string) ?? "agent";
+		const spinner = theme.fg("accent", spinnerFrame(String(d.agentId ?? "")));
+		const meta: string[] = [];
 		const progressText = extractContentText(result?.content);
 		if (progressText) {
-			const elapsedMatch = progressText.match(/elapsed=(\d+)s/);
-			const tokenMatch = progressText.match(/tokens=(\d+)/);
-			const toolMatch = progressText.match(/tool:\s+(\S+)/);
-			const elapsedSec = elapsedMatch ? parseInt(elapsedMatch[1]!, 10) : 0;
-			const tokens = tokenMatch ? parseInt(tokenMatch[1]!, 10) : 0;
+			const parsed = parseCompactToolProgress(progressText);
+			const elapsedSec = parsed ? Math.round(parsed.elapsedMs / 1000) : 0;
+			const tokens = parsed?.tokens ?? 0;
 			const tps = elapsedSec > 0 ? Math.round(tokens / elapsedSec) : 0;
-
-			if (elapsedSec > 0) parts.push(theme.fg("dim", formatDuration(elapsedSec * 1000)));
-			if (tps > 0) parts.push(theme.fg("dim", `${formatTokens(tps)} tok/s`));
-			if (toolMatch) parts.push(theme.fg("dim", `· ${toolMatch[1]}`));
+			if (elapsedSec > 0) meta.push(formatDuration(elapsedSec * 1000));
+			if (tps > 0) meta.push(`${formatTokens(tps)} tok/s`);
+			if (parsed?.currentTool) meta.push(parsed.currentTool);
 		}
-
-		contentLines.push(padVisual(` ${spinner} ${parts.join("  ")}`, innerW));
-		return buildFrameBottom(contentLines, w, theme, "borderAccent", "borderAccent");
+		const left = `${spinner} ${theme.fg("toolTitle", theme.bold(name))}`;
+		return railLine(RAIL.body, "borderAccent", railLeaders(left, theme.fg("dim", meta.join(" · ")), budget, theme), theme, budget);
 	}
 
-	// Brief mode: non-agent results get brief treatment
+	// ── Brief / nameless results ──
 	if (!results?.length && !d.agentId) {
 		const briefText = briefToolResult("agent", result as { content?: unknown[] }, theme);
-		contentLines.push(padVisual(` ${briefText}`, innerW));
-		return buildFrameBottom(contentLines, w, theme, bColor, bColor);
+		return railLine(RAIL.close, closeSlot, `${briefText}`, theme, budget);
 	}
 
+	const label =
+		(d.agentName as string) ?? (d.agentId as string) ?? ((results?.[0] as Record<string, unknown>)?.agentId as string) ?? "agent";
+
+	// ── Closed card ──
 	if (!ctx.expanded) {
-		// Collapsed: compact card
 		const badge = statusBadge(status, theme);
-		const agentId = (d.agentId as string) ?? ((results?.[0] as Record<string, unknown>)?.agentId as string) ?? "agent";
-		const nameTag = theme.fg("toolTitle", theme.bold(agentId));
-		contentLines.push(padVisual(` ${badge} ${nameTag}`, innerW));
-
-		// Error or output preview
+		const head = `${badge} ${theme.fg("toolTitle", theme.bold(label))}`;
 		if (d.error) {
-			contentLines.push(padVisual(` ${theme.fg("error", truncLine(String(d.error), innerW - 4))}`, innerW));
-		} else if (results?.length) {
-			const output = (results[0] as Record<string, unknown>).output as string | undefined;
-			if (output) {
-				const preview = truncLine(output.split("\n")[0] ?? "", innerW - 4);
-				contentLines.push(padVisual(` ${theme.fg("muted", preview)}`, innerW));
-			}
+			return railLine(RAIL.close, "error", `${head} ${theme.fg("error", truncLine(String(d.error), budget - 24))}`, theme, budget);
 		}
-	} else {
-		// Expanded: detailed rows
-		if (results?.length) {
-			for (let i = 0; i < results.length; i++) {
-				const item = results[i]!;
-				const icon = statusIcon((item.status as string) ?? "", theme);
-				const label = theme.fg("toolTitle", theme.bold((item.agentId as string) ?? "agent"));
-				contentLines.push(padVisual(` ${icon} ${label}`, innerW));
-
-				if (item.error) {
-					contentLines.push(padVisual(`   ${theme.fg("error", truncLine(String(item.error), innerW - 6))}`, innerW));
-				} else if (item.output) {
-					const outputLines = String(item.output).split("\n").slice(0, 5);
-					for (const line of outputLines) {
-						contentLines.push(padVisual(`   ${theme.fg("dim", truncLine(line, innerW - 6))}`, innerW));
-					}
-				}
-				// Separator between agents
-				if (i < results.length - 1) {
-					contentLines.push(padVisual(theme.fg("borderMuted", "─".repeat(innerW - 2)), innerW));
+		const output = results?.length ? ((results[0] as Record<string, unknown>).output as string | undefined) : undefined;
+		const preview = output ? output.split("\n").find((l) => l.trim()) : undefined;
+		const right = theme.fg("dim", PI_EXPAND_CHORD);
+		if (preview) {
+			const left = `${head} ${theme.fg("muted", truncLine(preview, Math.max(8, budget - visibleWidth(head) - 8)))}`;
+			return railLine(RAIL.close, closeSlot, railLeaders(left, right, budget, theme), theme, budget);
+		}
+		// Live 2026-09-16: with no output preview the cap printed a bare
+		// `┗ ● explorer`, so the expand affordance vanished exactly when the card
+		// is hardest to read (an agent run whose result carries no output line).
+		// The team card always shows the chord; this one now does too.
+		return railLine(RAIL.close, closeSlot, railLeaders(head, right, budget, theme), theme, budget);
+	}
+
+	// ── Expanded card ──
+	const lines: string[] = [];
+	if (results?.length) {
+		for (const item of results) {
+			const icon = statusIcon((item.status as string) ?? "", theme);
+			lines.push(
+				railLine(
+					RAIL.body,
+					"border",
+					`${icon} ${theme.fg("toolTitle", theme.bold((item.agentId as string) ?? "agent"))}`,
+					theme,
+					budget,
+				),
+			);
+			if (item.error) {
+				lines.push(previewLine(RAIL.body, "error", String(item.error), theme, budget));
+			} else if (item.output) {
+				for (const line of String(item.output).split("\n").slice(0, 5)) {
+					lines.push(previewLine(RAIL.body, "border", line, theme, budget));
 				}
 			}
-		} else if (d.agentId) {
-			const icon = statusIcon((d.status as string) ?? "", theme);
-			contentLines.push(padVisual(` ${icon} ${theme.fg("toolTitle", theme.bold(d.agentId as string))}`, innerW));
-			if (d.error) {
-				contentLines.push(padVisual(`   ${theme.fg("error", truncLine(String(d.error), innerW - 6))}`, innerW));
-			}
-		} else {
-			const text = extractContentText(result?.content);
-			if (text) contentLines.push(padVisual(` ${theme.fg("dim", truncLine(text, innerW - 4))}`, innerW));
 		}
+	} else if (d.agentId) {
+		lines.push(
+			railLine(RAIL.body, "border", `${statusIcon(status, theme)} ${theme.fg("toolTitle", theme.bold(label))}`, theme, budget),
+		);
+		if (d.error) lines.push(previewLine(RAIL.body, "error", String(d.error), theme, budget));
+	} else {
+		lines.push(previewLine(RAIL.body, "border", extractContentText(result?.content), theme, budget));
 	}
-
-	return buildFrameBottom(contentLines, w, theme, bColor, bColor);
+	lines.push(railLine(RAIL.close, closeSlot, `${theme.fg("muted", label)} ${theme.fg("dim", PI_EXPAND_CHORD)}`, theme, budget));
+	return lines.join("\n");
 }
 
-// ── Card builders ──────────────────────────────────────────────────────
+// ── Metrics ────────────────────────────────────────────────────────────
 
 interface Metrics {
 	taskCount?: number;
@@ -475,134 +490,6 @@ interface Metrics {
 	durationMs?: number;
 }
 
-function appendRunCard(lines: string[], records: CrewAgentRecord[], status: string, runId: string, theme: CrewTheme, innerW: number): void {
-	const completed = records.filter((r) => r.status === "completed").length;
-	const total = records.length;
-	const duration = computeTotalDuration(records);
-	const tokens = computeTotalTokens(records);
-	const cost = computeTotalCost(records);
-
-	// Line 1: badge + summary + expand hint (P2)
-	const badge = statusBadge(status, theme);
-	const title = theme.fg("toolTitle", theme.bold("crew run"));
-	const idTag = theme.fg("dim", shortId(runId));
-	const hint = theme.fg("dim", "⌘E");
-	const left = ` ${badge} ${title}  ${idTag}`;
-	const right = `${hint}`;
-	const gap = innerW - visibleWidth(left) - visibleWidth(right);
-	lines.push(padVisual(left + (gap > 1 ? " ".repeat(gap) : " ") + right, innerW));
-
-	// Line 2: compact metrics + cost (P1)
-	const parts: string[] = [];
-	parts.push(`${completed}/${total} done`);
-	if (duration > 0) parts.push(formatDuration(duration));
-	if (tokens > 0) parts.push(`${formatTokens(tokens)} tok`);
-	if (cost > 0) parts.push(`$${cost.toFixed(3)}`);
-	lines.push(padVisual(`   ${theme.fg("dim", parts.join(" · "))}`, innerW));
-}
-
-function appendMetricsCard(lines: string[], m: Metrics, status: string, runId: string, theme: CrewTheme, innerW: number): void {
-	// Line 1: badge + title + expand hint (P2)
-	const badge = statusBadge(status, theme);
-	const title = theme.fg("toolTitle", theme.bold("crew run"));
-	const idTag = theme.fg("dim", shortId(runId));
-	const hint = theme.fg("dim", "⌘E");
-	const left = ` ${badge} ${title}  ${idTag}`;
-	const right = `${hint}`;
-	const gap = innerW - visibleWidth(left) - visibleWidth(right);
-	lines.push(padVisual(left + (gap > 1 ? " ".repeat(gap) : " ") + right, innerW));
-
-	// Line 2: compact metrics + cost (P1)
-	const parts: string[] = [];
-	if (m.completedCount != null && m.taskCount) parts.push(`${m.completedCount}/${m.taskCount} done`);
-	if (m.durationMs) parts.push(formatDuration(m.durationMs));
-	if (m.totalTokens) parts.push(`${formatTokens(m.totalTokens)} tok`);
-	if (m.totalCost) parts.push(`$${m.totalCost.toFixed(3)}`);
-	if (parts.length) lines.push(padVisual(`   ${theme.fg("dim", parts.join(" · "))}`, innerW));
-}
-
-function appendSimpleCard(lines: string[], status: string, runId: string, theme: CrewTheme, innerW: number): void {
-	const badge = statusBadge(status, theme);
-	const parts: string[] = [status];
-	if (runId) parts.push(shortId(runId));
-	lines.push(padVisual(` ${badge} ${theme.fg("text", parts.join(" · ") || "done")}`, innerW));
-}
-
-function appendExpandedRun(
-	lines: string[],
-	records: CrewAgentRecord[],
-	status: string,
-	runId: string,
-	theme: CrewTheme,
-	w: number,
-	innerW: number,
-): void {
-	const completed = records.filter((r) => r.status === "completed").length;
-	const total = records.length;
-	const ratio = total > 0 ? completed / total : 0;
-	const duration = computeTotalDuration(records);
-	const tokens = computeTotalTokens(records);
-
-	// Header
-	lines.push(padVisual(` ${theme.fg("toolTitle", theme.bold("CREW RUN RESULT"))}  ${theme.fg("dim", shortId(runId))}`, innerW));
-	lines.push(padVisual(theme.fg("borderMuted", "─".repeat(innerW - 2)), innerW));
-
-	// Progress bar
-	const barW = Math.min(innerW - 22, 40);
-	const bar = progressBar(ratio, barW, theme);
-	const count = theme.fg("muted", ` ${completed}/${total}`);
-	lines.push(padVisual(` ${theme.fg("muted", "Progress")} ${bar}${count}`, innerW));
-
-	// Metrics
-	const metricLine = [theme.fg("muted", formatDuration(duration)), theme.fg("muted", `${formatTokens(tokens)} tok`)].join(
-		theme.fg("dim", " · "),
-	);
-	lines.push(padVisual(` ${metricLine}`, innerW));
-	lines.push(padVisual(theme.fg("borderMuted", "─".repeat(innerW - 2)), innerW));
-
-	// Agent rows
-	for (const r of records) {
-		const icon = statusIcon(r.status, theme);
-		const role = theme.fg("toolTitle", theme.bold(r.role || r.agent || "agent"));
-		const model = r.model ? theme.fg("dim", ` (${r.model.split("/").at(-1)})`) : "";
-		const dur = r.startedAt ? formatDuration(computeRecordDuration(r)) : "";
-		const toolCount = `${r.toolUses ?? r.progress?.toolCount ?? 0} tools`;
-		lines.push(padVisual(` ${icon} ${role}${model}  ${theme.fg("dim", `${toolCount} · ${dur}`)}`, innerW));
-
-		// Usage
-		const usage = r.usage;
-		const usageParts: string[] = [];
-		if (usage?.input) usageParts.push(theme.fg("dim", `↑${formatTokens(usage.input)}`));
-		if (usage?.output) usageParts.push(theme.fg("dim", `↓${formatTokens(usage.output)}`));
-		if (usage?.cost) usageParts.push(theme.fg("dim", `$${usage.cost.toFixed(3)}`));
-		if (usageParts.length) lines.push(padVisual(`   ${usageParts.join(" ")}`, innerW));
-	}
-}
-
-function appendExpandedMetrics(
-	lines: string[],
-	m: Metrics | undefined,
-	status: string,
-	runId: string,
-	theme: CrewTheme,
-	w: number,
-	innerW: number,
-): void {
-	lines.push(padVisual(` ${theme.fg("toolTitle", theme.bold("CREW RUN RESULT"))}  ${theme.fg("dim", shortId(runId))}`, innerW));
-	lines.push(padVisual(theme.fg("borderMuted", "─".repeat(innerW - 2)), innerW));
-	if (m) {
-		const ratio = m.taskCount ? (m.completedCount ?? 0) / m.taskCount : 0;
-		const barW = Math.min(innerW - 22, 40);
-		const bar = progressBar(ratio, barW, theme);
-		const count = theme.fg("muted", ` ${m.completedCount ?? 0}/${m.taskCount ?? 0}`);
-		lines.push(padVisual(` ${bar}${count}`, innerW));
-		const parts: string[] = [];
-		if (m.durationMs) parts.push(formatDuration(m.durationMs));
-		if (m.totalTokens) parts.push(`${formatTokens(m.totalTokens)} tok`);
-		if (parts.length) lines.push(padVisual(` ${theme.fg("dim", parts.join(" · "))}`, innerW));
-	}
-}
-
 // ── Helpers ────────────────────────────────────────────────────────────
 
 function extractContentText(content: unknown): string {
@@ -615,7 +502,11 @@ function extractContentText(content: unknown): string {
 	return String((texts[texts.length - 1]! as Record<string, unknown>).text ?? "");
 }
 
-/** Parse streaming progress text from team-tool progress binder. */
+/** Parse streaming progress text from the team-tool progress binder.
+ * The format is a shared contract — `parseCompactToolProgress`
+ * (../tool-progress-formatter.ts) owns the tokens; this adapter only maps them
+ * onto the card's display model (task counts win over the bare status row).
+ */
 interface StreamingProgress {
 	elapsedMs: number;
 	completed: number | null;
@@ -625,71 +516,31 @@ interface StreamingProgress {
 }
 
 function parseStreamingProgress(text: string): StreamingProgress | null {
-	if (!text) return null;
-
-	// Format: "team status=starting elapsed=11s"
-	const elapsedMatch = text.match(/elapsed=(\d+)s/);
-	const elapsedMs = elapsedMatch ? parseInt(elapsedMatch[1]!, 10) * 1000 : 0;
-
-	// Format from formatCompactToolProgress: "tasks completed=2 running=1"
-	const taskMatch = text.match(/tasks[^\n]*(?:completed|done)=(\d+)[^\n]*(?:running|waiting|queued)=(\d+)/);
-	const doneMatch = text.match(/(\d+)\/(\d+)\s+done/);
-
-	// Active agent: "  explorer->explorer turn=5 tokens=1234"
-	const agentMatch = text.match(/\s+(\w+)->(\w+)\s+turn=/);
-	const activeAgent = agentMatch ? `${agentMatch[1]}/${agentMatch[2]}` : null;
-
-	// Current tool: "  tool: bash (#3)"
-	const toolMatch = text.match(/tool:\s+(\S+)/);
-	const toolInfo = toolMatch ? ` · ${toolMatch[1]}` : "";
+	const parsed = parseCompactToolProgress(text);
+	if (!parsed) return null;
 
-	if (doneMatch) {
+	const toolInfo = parsed.currentTool ? ` · ${parsed.currentTool}` : "";
+	if (parsed.completed != null && parsed.total != null) {
 		return {
-			elapsedMs,
-			completed: parseInt(doneMatch[1]!, 10),
-			total: parseInt(doneMatch[2]!, 10),
+			elapsedMs: parsed.elapsedMs,
+			completed: parsed.completed,
+			total: parsed.total,
 			status: null,
-			activeAgent: (activeAgent ?? "") + toolInfo,
+			activeAgent: (parsed.activeAgent ?? "") + toolInfo,
 		};
 	}
-	if (taskMatch) {
-		const done = parseInt(taskMatch[1]!, 10);
-		const running = parseInt(taskMatch[2]!, 10);
-		const total = done + running;
+	if (parsed.elapsedMs > 0) {
 		return {
-			elapsedMs,
-			completed: done,
-			total,
-			status: null,
-			activeAgent: (activeAgent ?? "") + toolInfo,
-		};
-	}
-	if (elapsedMs > 0) {
-		const statusMatch = text.match(/status=(\w+)/);
-		return {
-			elapsedMs,
+			elapsedMs: parsed.elapsedMs,
 			completed: null,
 			total: null,
-			status: statusMatch?.[1] ?? null,
-			activeAgent,
+			status: parsed.status,
+			activeAgent: parsed.activeAgent,
 		};
 	}
-
 	return null;
 }
 
-/** Animated scanning bar for indeterminate progress. */
-function renderScanBar(barWidth: number, elapsedMs: number, theme: CrewTheme): string {
-	const pos = Math.floor((elapsedMs / 400) % (barWidth + 6)) - 3; // bounce range
-	const segW = Math.max(3, Math.floor(barWidth * 0.3));
-	let bar = "";
-	for (let i = 0; i < barWidth; i++) {
-		const inSeg = i >= pos && i < pos + segW;
-		bar += inSeg ? theme.fg("accent", "█") : theme.fg("dim", "░");
-	}
-	return bar;
-}
-
 function computeTotalDuration(records: CrewAgentRecord[]): number {
 	let total = 0;
 	for (const r of records) total += computeRecordDuration(r);
@@ -699,7 +550,7 @@ function computeTotalDuration(records: CrewAgentRecord[]): number {
 function computeRecordDuration(r: CrewAgentRecord): number {
 	if (!r.startedAt) return 0;
 	const start = new Date(r.startedAt).getTime();
-	const end = r.completedAt ? new Date(r.completedAt).getTime() : Date.now();
+	const end = r.completedAt ? new Date(r.completedAt).getTime() : spinnerClockNow();
 	if (!Number.isFinite(start) || !Number.isFinite(end)) return 0;
 	return Math.max(0, end - start);
 }
@@ -720,14 +571,14 @@ function computeTotalTokens(records: CrewAgentRecord[]): number {
 	return total;
 }
 
-/** P5: Shorten file path by replacing $HOME with ~ */
+/** Shorten file path by replacing $HOME with ~ */
 function shortenPath(p: string): string {
 	const home = process.env.HOME ?? process.env.USERPROFILE ?? "";
 	if (home && p.startsWith(home)) return "~" + p.slice(home.length);
 	return p;
 }
 
-/** P8: Create clickable file hyperlink via OSC 8.
+/** Create clickable file hyperlink via OSC 8.
  * Removed (M-13 fix, code-review 2026-06-23): this function was dead code (no
  * callers) and interpolated a path into an OSC-8 escape without sanitizing
  * control chars (\x07 BEL / \x1b\\ ST), a potential terminal-injection sink.