pi-crew 0.10.1 → 0.10.3

package/src/ui/widget/widget-formatters.ts

@@ -7,7 +7,7 @@
 import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
 import type { LiveAgentHandle } from "../../runtime/live-session/live-agent-manager.ts";
 import { getTaskUsage } from "../../runtime/usage-tracker.ts";
-import { visibleWidth } from "../../utils/visual.ts";
+import { truncateToWidth, visibleWidth } from "../../utils/visual.ts";
 import { computeLiveDurationMs } from "../live-duration.ts";
 
 // ── No-color mode (UI-10) ─────────────────────────────────────────────
@@ -75,6 +75,7 @@ const TOKENS_METRIC_WIDTH = 10; // "1.2k tok", "12.3M tok"
 const TPS_METRIC_WIDTH = 9; // "411 tok/s"
 const CTX_METRIC_WIDTH = 7; // "100% ctx"
 const DURATION_METRIC_WIDTH = 6; // "120.0s"
+const COST_METRIC_WIDTH = 9; // "$0.001234"
 
 function alignMetric(value: string, width: number): string {
 	const pad = Math.max(0, width - visibleWidth(value));
@@ -82,6 +83,11 @@ function alignMetric(value: string, width: number): string {
 }
 
 export function formatTokensCompact(count: number): string {
+	// Display-layer guard: state records have at least once carried the
+	// literal "***" in a numeric field (redaction false-positive, fixed at
+	// the source). A string here would print `*** tok` verbatim, so non-
+	// numeric/undefined input renders as an empty metric instead.
+	if (typeof count !== "number" || !Number.isFinite(count)) return "";
 	if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M tok`;
 	if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k tok`;
 	return `${count} tok`;
@@ -99,6 +105,13 @@ export function elapsed(iso: string | undefined, now = Date.now()): string | und
 	return `${Math.floor(ms / 3_600_000)}h`;
 }
 
+/** pi-subtask's always-on elapsed tail: `0s` from the start (its fork rows
+ *  flatten sub-second ages to 0 — not the legacy widget's "now"). */
+export function dockElapsed(iso: string | undefined, now = Date.now()): string {
+	const value = elapsed(iso, now);
+	return value === undefined ? "" : value === "now" ? "0s" : value;
+}
+
 // ── Agent activity description ────────────────────────────────────────
 
 const TOOL_LABELS: Record<string, string> = {
@@ -176,6 +189,218 @@ export function agentActivity(agent: CrewAgentRecord, liveHandle?: LiveAgentHand
 	return "done";
 }
 
+// ── Per-agent cost ────────────────────────────────────────────────────
+
+/**
+ * Compact per-agent spend for widget rows, or "" when there is nothing to
+ * show. `formatCost`'s 6-decimal sub-cent output (`$0.001000`) wastes a third
+ * of a one-line row, so the widget uses a short form: cent precision in
+ * dollars, milli-precision below, and a `< $0.001` floor.
+ */
+export function formatCostCompact(cost: number): string {
+	if (cost >= 1) return `$${cost.toFixed(2)}`;
+	if (cost >= 0.01) return `$${cost.toFixed(3).replace(/0+$/, "").replace(/\.$/, "")}`;
+	if (cost >= 0.001) return `$${cost.toFixed(4).replace(/0+$/, "").replace(/\.$/, "")}`;
+	return "< $0.001";
+}
+
+/**
+ * Formatted per-agent spend, or "" when there is nothing to show. The value
+ * already lives on the durable task record and the dashboard agents pane has
+ * shown it since Round 17; the widget omitted it only by oversight.
+ */
+export function agentCost(agent: CrewAgentRecord): string {
+	const cost = agent.usage?.cost;
+	if (typeof cost !== "number" || !Number.isFinite(cost) || cost <= 0) return "";
+	return formatCostCompact(cost);
+}
+
+// ── pi-subtask dock formatters ─────────────────────────────────────────
+
+/**
+ * pi-subtask's FIXED per-status glyphs (`statusIcon` in source/pi-subtask:
+ * starting ○, running ✻, done ✓, failed ✗, stopped ■). The compact dock
+ * deliberately does NOT spin the running marker like the legacy widget —
+ * the row set is stable across ticks, which is what makes the keyboard
+ * cursor feel anchored.
+ */
+export function dockStatusIcon(status: string): string {
+	switch (status) {
+		case "running":
+			return "✻";
+		case "queued":
+		case "waiting":
+			return "○";
+		case "completed":
+			return "✓";
+		case "failed":
+			return "✗";
+		case "needs_attention":
+			return "⚠";
+		case "cancelled":
+		case "stopped":
+			return "■";
+		default:
+			return "?";
+	}
+}
+
+/** pi-subtask uses the status word as a finished row's activity. */
+export function dockStatusLabel(status: string): string {
+	switch (status) {
+		case "completed":
+			return "done";
+		case "failed":
+			return "failed";
+		case "cancelled":
+		case "stopped":
+			return "stopped";
+		case "needs_attention":
+			return "needs attention";
+		case "queued":
+			return "queued";
+		case "waiting":
+			return "waiting";
+		default:
+			return status;
+	}
+}
+
+/** pi-subtask's formatTokens: raw under 1k, `Nk` under 1M, `N.M` above. */
+export function tokenCountShort(count: number): string {
+	if (count < 1_000) return `${count}`;
+	if (count < 1_000_000) return `${Math.round(count / 1_000)}k`;
+	return `${(count / 1_000_000).toFixed(1)}M`;
+}
+
+export interface DockUsageOptions {
+	/** While the agent's pane is open: add tok/s + context % like pi-subtask. */
+	viewed?: boolean;
+	/** Model context window for the `P% / N` gauge; omitted when unknown. */
+	contextWindow?: number;
+}
+
+/**
+ * pi-subtask's footer-style usage (formatUsage): `↑in ↓out Rcache CH% $cost`,
+ * plus `N tok/s` and `P% / window` while viewed. Live agents have split
+ * input/output/cacheWrite via the usage tracker; non-live ones show the
+ * durable token total + cost.
+ */
+export function dockUsageText(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle, options: DockUsageOptions = {}): string {
+	const parts: string[] = [];
+	if (liveHandle) {
+		const usage = getTaskUsage(liveHandle.taskId);
+		const input = usage.input ?? 0;
+		const output = usage.output ?? 0;
+		const cacheWrite = usage.cacheWrite ?? 0;
+		if (input > 0) parts.push(`↑${tokenCountShort(input)}`);
+		if (output > 0) parts.push(`↓${tokenCountShort(output)}`);
+		if (cacheWrite > 0) parts.push(`R${tokenCountShort(cacheWrite)}`);
+		const promptTokens = input + cacheWrite;
+		if (cacheWrite > 0 && promptTokens > 0) {
+			parts.push(`CH${((cacheWrite / promptTokens) * 100).toFixed(1)}%`);
+		}
+		const cost = agent.usage?.cost;
+		if (typeof cost === "number" && Number.isFinite(cost) && cost > 0) parts.push(`$${cost.toFixed(4)}`);
+		if (options.viewed) {
+			const act = liveHandle.activity;
+			const ms = computeLiveDurationMs(act);
+			const totalTokens = input + output + cacheWrite;
+			if (totalTokens > 0 && ms > 1000) {
+				const tps = Math.round(totalTokens / (ms / 1000));
+				if (tps > 0) parts.push(`${tps} tok/s`);
+			}
+			try {
+				const ctxPct = liveHandle.session.getSessionStats?.()?.contextUsage?.percent;
+				if (ctxPct != null) {
+					const window =
+						options.contextWindow && options.contextWindow >= 1_000_000
+							? `${(options.contextWindow / 1_000_000).toFixed(1)}M`
+							: options.contextWindow
+								? tokenCountShort(options.contextWindow)
+								: "";
+					parts.push(`${Math.round(ctxPct)}%${window ? ` / ${window}` : ""}`);
+				}
+			} catch {
+				/* ignore */
+			}
+		}
+		return parts.join(" ");
+	}
+	const tokens = agent.progress?.tokens;
+	const tokenCount = typeof tokens === "number" && Number.isFinite(tokens) && tokens > 0 ? tokens : 0;
+	if (tokenCount > 0) parts.push(`${tokenCountShort(tokenCount)} tok`);
+	const cost = agent.usage?.cost;
+	if (typeof cost === "number" && Number.isFinite(cost) && cost > 0) parts.push(`$${cost.toFixed(4)}`);
+	return parts.join(" ");
+}
+
+// ── Adaptive single-line row ───────────────────────────────────────────
+
+export interface BudgetedRowParts {
+	/** Marker + glyph prefix; never trimmed. */
+	lead: string;
+	/** Agent label; grows into whatever the activity leaves over. */
+	name: string;
+	/** Current activity; shrinks first but keeps a readable floor. */
+	activity: string;
+	/** Metrics tail; never trimmed, so numbers stay comparable across ticks. */
+	suffix: string;
+	separator?: string;
+}
+
+/** Smallest activity/name slice still worth showing before we drop the field. */
+const MIN_FIELD_WIDTH = 12;
+
+/**
+ * Assemble one row that fills `width` without wrapping.
+ *
+ * `lead` and `suffix` are fixed costs; the remaining budget is split between
+ * `name` and `activity`. The activity absorbs the trimming first (it changes
+ * every tick anyway) but keeps a MIN_FIELD_WIDTH floor, and the name expands
+ * into the rest up to its natural length — so a 200-column terminal shows the
+ * full description instead of the same clip an 80-column one gets.
+ *
+ * The closing truncate is a hard guard, not an optimisation: pi's renderer
+ * throws on a line wider than the terminal.
+ */
+export function budgetedRow(parts: BudgetedRowParts, width: number): string {
+	const sep = parts.separator ?? " · ";
+	const { lead, suffix } = parts;
+	const name = parts.name.replace(/\s+/g, " ").trim();
+	const activity = parts.activity.replace(/\s+/g, " ").trim();
+	if (!name && !activity) return truncateToWidth(lead + suffix, width);
+	if (!activity) return fitNameOnly(lead, name, suffix, width);
+	if (!name) return fitNameOnly(lead, activity, suffix, width);
+
+	const budget = width - visibleWidth(lead) - visibleWidth(suffix) - visibleWidth(sep);
+	// Too narrow to hold name + activity above their floors: keep the name
+	// only, and never let the metrics tail eat the clipping.
+	if (budget < MIN_FIELD_WIDTH * 2) return fitNameOnly(lead, name, suffix, width);
+
+	const nameNatural = visibleWidth(name);
+	const activityNatural = visibleWidth(activity);
+	const activityRoom = Math.min(activityNatural, Math.max(MIN_FIELD_WIDTH, budget - nameNatural));
+	const nameRoom = Math.max(MIN_FIELD_WIDTH, budget - activityRoom);
+	const assembled = lead + truncateToWidth(name, nameRoom) + sep + truncateToWidth(activity, activityRoom) + suffix;
+	// The room arithmetic keeps this ≤ width by construction (nameRoom +
+	// activityRoom ≤ budget in every branch); this guard is the last line of
+	// defense because pi's renderer throws on over-width lines.
+	if (visibleWidth(assembled) <= width) return assembled;
+	return fitNameOnly(lead, name, suffix, width);
+}
+
+/**
+ * Narrow-terminal fallback: fixed lead + suffix, the name absorbs every
+ * remaining column. The metrics tail is sacred — it must stay comparable
+ * across ticks — so clipping always happens in the middle fields.
+ */
+function fitNameOnly(lead: string, name: string, suffix: string, width: number): string {
+	const fixed = visibleWidth(lead) + visibleWidth(suffix);
+	if (fixed >= width) return truncateToWidth(lead + suffix, width);
+	return lead + truncateToWidth(name, width - fixed) + suffix;
+}
+
 // ── Agent stats line ──────────────────────────────────────────────────
 
 export function agentStats(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle): string {
@@ -186,6 +411,10 @@ export function agentStats(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle)
 		const usage = getTaskUsage(liveHandle.taskId);
 		const total = (usage.input ?? 0) + (usage.output ?? 0) + (usage.cacheWrite ?? 0);
 		if (total > 0) parts.push(alignMetric(formatTokensCompact(total), TOKENS_METRIC_WIDTH));
+		// The live usage tracker carries tokens only (LifetimeUsage has no cost
+		// field), so cost always comes off the durable task record.
+		const liveCost = agentCost(agent);
+		if (liveCost) parts.push(alignMetric(liveCost, COST_METRIC_WIDTH));
 		try {
 			const stats = liveHandle.session.getSessionStats?.();
 			const ctxPct = stats?.contextUsage?.percent;
@@ -200,11 +429,18 @@ export function agentStats(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle)
 		}
 		parts.push(alignMetric(`${(ms / 1000).toFixed(1)}s`, DURATION_METRIC_WIDTH));
 	} else {
+		// Type-narrowed: state has carried the literal "***" (redaction
+		// false-positive) in progress.tokens, which is truthy but not a count.
+		// Only real numbers produce metrics; formatTokensCompact guards too.
+		const tokens = agent.progress?.tokens;
+		const tokenCount = typeof tokens === "number" ? tokens : undefined;
 		if (agent.toolUses) parts.push(alignMetric(`${agent.toolUses} tools`, TOOLS_METRIC_WIDTH));
-		if (agent.progress?.tokens) parts.push(alignMetric(formatTokensCompact(agent.progress.tokens), TOKENS_METRIC_WIDTH));
+		if (tokenCount && tokenCount > 0) parts.push(alignMetric(formatTokensCompact(tokenCount), TOKENS_METRIC_WIDTH));
+		const cost = agentCost(agent);
+		if (cost) parts.push(alignMetric(cost, COST_METRIC_WIDTH));
 		const ageMs = agent.startedAt ? Math.max(0, Date.now() - new Date(agent.startedAt).getTime()) : 0;
-		if (agent.progress?.tokens && ageMs > 1000) {
-			const tps = Math.round(agent.progress.tokens / (ageMs / 1000));
+		if (tokenCount && tokenCount > 0 && ageMs > 1000) {
+			const tps = Math.round(tokenCount / (ageMs / 1000));
 			if (tps > 0) parts.push(alignMetric(`${formatTokensCompact(tps)}/s`, TPS_METRIC_WIDTH));
 		}
 		const age = elapsed(agent.completedAt ?? agent.startedAt);

package/src/ui/widget/widget-renderer.ts

@@ -4,19 +4,30 @@
  * Extracted from crew-widget.ts.
  */
 
+import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
 import { listLiveAgents } from "../../runtime/live-session/live-agent-manager.ts";
 import { isPlanApprovalStatePending } from "../../runtime/plan-approval.ts";
 import { isFinishedRunStatus } from "../../runtime/process-status.ts";
+import type { TeamRunManifest } from "../../state/types.ts";
 import { truncate } from "../../utils/visual.ts";
 import { Box, Text } from "../layout-primitives.ts";
 import { spinnerFrame } from "../spinner.ts";
 import { colorizeStatusGlyphs, iconForStatus } from "../status-colors.ts";
 import type { CrewTheme } from "../theme-adapter.ts";
-import { agentActivity, agentStats, notificationBadge } from "./widget-formatters.ts";
+import {
+	agentActivity,
+	agentStats,
+	budgetedRow,
+	dockElapsed,
+	dockStatusIcon,
+	dockStatusLabel,
+	dockUsageText,
+	notificationBadge,
+} from "./widget-formatters.ts";
 import { activeWidgetRuns, shortRunLabel } from "./widget-model.ts";
 import type { WidgetRun } from "./widget-types.ts";
 
-const MAX_AGENTS_DISPLAY = 3;
+export const MAX_AGENTS_DISPLAY = 3;
 const FINISHED_LINGER_MAX_AGE = 1;
 /** Default terminal width when caller doesn't pass one explicitly. Keep <= 116
  * (the same default used elsewhere in pi-crew tool renderers) so we never paint
@@ -43,8 +54,192 @@ export function widgetHeader(runs: WidgetRun[], runningGlyph: string, maxLines =
 	return `${runningGlyph} Crew agents${notificationBadge(notificationCount)} · ${parts.join(" · ")} · /team-dashboard`;
 }
 
+// ── Agent ordering (shared with the inline panel) ──────────────────────
+
+/**
+ * L-4: prioritize RUNNING > QUEUED > WAITING so the most relevant live workers
+ * are always shown first. Finished rows fill only the leftover budget and never
+ * steal a slot from an active agent.
+ */
+const ACTIVE_PRIORITY: Record<string, number> = { running: 0, queued: 1, waiting: 2 };
+
+function isActiveStatus(status: string): boolean {
+	return status === "running" || status === "queued" || status === "waiting";
+}
+
+/**
+ * The agent order the widget paints, split into its two sections.
+ *
+ * Exported because the inline panel navigates the same list: if the panel
+ * derived its own order, the cursor index would drift from the rendered rows.
+ * One function, one order.
+ */
+export function orderWidgetAgents(entry: WidgetRun, now = Date.now()): { active: CrewAgentRecord[]; finished: CrewAgentRecord[] } {
+	const runDone = isFinishedRunStatus(entry.run.status);
+	const active = entry.agents.filter((agent) => isActiveStatus(agent.status));
+	const finished = entry.agents.filter((agent) => {
+		if (isActiveStatus(agent.status)) return false;
+		if (!agent.completedAt) return false;
+		// Mid-run, finished agents are the run's HISTORY: they must stay in
+		// the dock until the RUN itself is done, not age out after a minute
+		// while later phases are still working. The linger windows below only
+		// apply once the run reached a terminal status (and the run-level
+		// visibility grace then decides how much longer the dock shows at all).
+		if (!runDone) return true;
+		const maxAgeMs = (ERROR_STATUSES.has(agent.status) ? ERROR_LINGER_MAX_AGE : FINISHED_LINGER_MAX_AGE) * 60_000;
+		const age = now - new Date(agent.completedAt).getTime();
+		return Number.isFinite(age) && age < maxAgeMs;
+	});
+	return {
+		active: [...active].sort((a, b) => (ACTIVE_PRIORITY[a.status] ?? 9) - (ACTIVE_PRIORITY[b.status] ?? 9)),
+		finished,
+	};
+}
+
 // ── Line builder ──────────────────────────────────────────────────────
 
+/**
+ * Row layout for the per-agent lines.
+ *
+ * - `detailed` — the historical two-line tree (name row + `⊶ activity` row).
+ * - `compact`  — one width-budgeted line per agent, so a wide terminal shows the
+ *   full description instead of the same clip a narrow one gets.
+ */
+export type WidgetRowStyle = "compact" | "detailed";
+
+export interface WidgetRenderOptions {
+	rowStyle?: WidgetRowStyle;
+	/** Task id under the inline panel cursor, if any. */
+	selectedTaskId?: string;
+	/** Task id whose transcript pane is open, if any. */
+	viewedTaskId?: string;
+	/**
+	 * True while the inline panel holds the cursor. Every agent is then listed
+	 * (no MAX_AGENTS_DISPLAY cap) so keyboard navigation can reach all of them;
+	 * the idle widget stays capped to keep the prompt area small.
+	 */
+	focused?: boolean;
+}
+
+/** Short display form of a model id: `zai/glm-5.3` → `glm-5.3`. */
+function shortModelLabel(agent: CrewAgentRecord, run: TeamRunManifest): string | undefined {
+	const model = agent.model ?? run.modelContext?.parentModel ?? run.modelContext?.override;
+	if (typeof model !== "string" || !model) return undefined;
+	return model.split("/").at(-1) ?? model;
+}
+
+/** One flat dock row (pi-subtask style) for an agent — active or finished. */
+function compactAgentRow(
+	run: TeamRunManifest,
+	agent: CrewAgentRecord,
+	finished: boolean,
+	runs: readonly WidgetRun[],
+	options: WidgetRenderOptions,
+	width: number,
+	liveHandle: ReturnType<typeof listLiveAgents>[number] | undefined,
+): string {
+	const marker = options.selectedTaskId === agent.taskId ? "❯" : " ";
+	const dockGlyph = options.viewedTaskId === agent.taskId ? "⏺" : dockStatusIcon(agent.status);
+	const name = liveHandle?.agent ?? agent.agent;
+	const label = liveHandle?.description ?? agent.role ?? "";
+	// Task-first: the agent exists to run its task, so the row names the task
+	// right after the agent. With multiple runs, prefix each row with its run
+	// label so the flat dock still says which run an agent belongs to.
+	const runTag = runs.length > 1 ? `${shortRunLabel(run)} · ` : "";
+	const taskTag = agent.taskId ? ` · ${agent.taskId}` : "";
+	const roleTag = label && label !== agent.taskId && label !== name ? ` · ${label}` : "";
+	const nameText = runTag + name + taskTag + roleTag;
+	// pi-subtask activity: the worker's latest line while running, otherwise
+	// the status word.
+	const liveLine = liveHandle?.activity?.responseText
+		?.split("\n")
+		.find((line) => line.trim())
+		?.trim();
+	const activity =
+		!finished && liveHandle?.status === "running" && liveLine
+			? liveLine.length > 60
+				? `${liveLine.slice(0, 60)}…`
+				: liveLine
+			: finished
+				? dockStatusLabel(agent.status)
+				: agentActivity(agent, liveHandle);
+	const usage = dockUsageText(agent, liveHandle, { viewed: options.viewedTaskId === agent.taskId });
+	const ageText = dockElapsed(agent.completedAt ?? agent.startedAt);
+	const model = shortModelLabel(agent, run);
+	// Stats tail: `· glm-5.3 · ↑1.2k ↓350 · 41s` — the model the worker is
+	// actually on first, then usage, then elapsed.
+	const suffix = `${model ? ` · ${model}` : ""}${usage ? ` · ${usage}` : ""}${ageText ? ` · ${ageText}` : ""}`;
+	return budgetedRow({ lead: `${marker} ${dockGlyph} `, name: nameText, activity, suffix }, width);
+}
+
+/**
+ * The compact dock: hint line, the `main` conversation row, then a
+ * MAX_AGENTS_DISPLAY-row SCROLL WINDOW over the flat agent list (exactly the
+ * order the inline panel navigates — `panelRowsFromRuns` parity). The window
+ * follows the panel selection bottom-pinned: moving the cursor past the
+ * window scrolls one row at a time and the ❯ marker is always painted; idle
+ * (no selection) shows the top of the list, which the shared ordering puts at
+ * the highest-priority live agents. Hidden rows surface as `… ↑N earlier` /
+ * `… +N more` indicators.
+ */
+function compactDockLines(
+	runs: WidgetRun[],
+	options: WidgetRenderOptions,
+	width: number,
+	maxLines: number,
+	notificationCount: number,
+	runningGlyph: string,
+): string[] {
+	const now = Date.now();
+	const flat: Array<{
+		run: TeamRunManifest;
+		agent: CrewAgentRecord;
+		finished: boolean;
+		liveHandle: ReturnType<typeof listLiveAgents>[number] | undefined;
+	}> = [];
+	for (const entry of runs) {
+		const { active, finished } = orderWidgetAgents(entry, now);
+		const liveForRun = listLiveAgents().filter((a) => a.runId === entry.run.runId);
+		for (const agent of active) {
+			flat.push({ run: entry.run, agent, finished: false, liveHandle: liveForRun.find((h) => h.taskId === agent.taskId) });
+		}
+		for (const agent of finished) {
+			flat.push({ run: entry.run, agent, finished: true, liveHandle: liveForRun.find((h) => h.taskId === agent.taskId) });
+		}
+	}
+
+	// No agents at all: fall back to the legacy header so the space under the
+	// editor is never just blank.
+	if (flat.length === 0) return [widgetHeader(runs, runningGlyph, maxLines, notificationCount)];
+
+	const lines: string[] = [];
+	let hint: string;
+	if (options.viewedTaskId) {
+		const viewedName = flat.find((row) => row.agent.taskId === options.viewedTaskId)?.agent.agent ?? "agent";
+		hint = `viewing @${viewedName} — typing goes to the agent · ↓ switch · esc back`;
+	} else if (options.focused) {
+		hint = "enter to view · x to stop/cancel · esc back";
+	} else {
+		hint = `agents (${flat.length}) — ↓ to select`;
+	}
+	lines.push(truncate(hint, width));
+	// Filled ● = you're on the main conversation; hollow ◯ = an agent view is
+	// open (same convention as pi-subtask's main row).
+	const mainMarker = options.focused && !options.selectedTaskId ? "❯" : " ";
+	const mainIcon = options.viewedTaskId ? "◯" : "●";
+	lines.push(truncate(`${mainMarker} ${mainIcon} main`, width));
+
+	const selectedIndex = options.selectedTaskId ? flat.findIndex((row) => row.agent.taskId === options.selectedTaskId) : -1;
+	const windowStart = selectedIndex >= 0 ? Math.max(0, selectedIndex - MAX_AGENTS_DISPLAY + 1) : 0;
+	const windowEnd = Math.min(flat.length, windowStart + MAX_AGENTS_DISPLAY);
+	if (windowStart > 0) lines.push(truncate(`  … ↑${windowStart} earlier (↑ to scroll)`, width));
+	for (const row of flat.slice(windowStart, windowEnd)) {
+		lines.push(compactAgentRow(row.run, row.agent, row.finished, runs, options, width, row.liveHandle));
+	}
+	if (windowEnd < flat.length) lines.push(truncate(`  … +${flat.length - windowEnd} more (↓ to scroll)`, width));
+	return lines;
+}
+
 export function buildWidgetLines(
 	cwd: string,
 	frame = 0,
@@ -52,7 +247,10 @@ export function buildWidgetLines(
 	providedRuns?: WidgetRun[],
 	notificationCount = 0,
 	width = DEFAULT_WIDGET_WIDTH,
+	options: WidgetRenderOptions = {},
 ): string[] {
+	const rowStyle: WidgetRowStyle = options.rowStyle ?? "detailed";
+	const focused = options.focused === true;
 	// Match the legacy `buildCrewWidgetLines` API: when no runs are supplied,
 	// auto-fetch via activeWidgetRuns(cwd). Otherwise widgets calling with
 	// only `(cwd, frame)` would render an empty line set (regression vs. the
@@ -61,18 +259,20 @@ export function buildWidgetLines(
 	if (!runs.length) return [];
 
 	const runningGlyph = spinnerFrame("widget-header");
+
+	// Compact = pi-subtask's dock: NO "Crew agents" header, NO tree — hint
+	// line, `main` row, then a 3-row scroll window over the flat agent list.
+	if (rowStyle === "compact") {
+		const lines = compactDockLines(runs, options, width, maxLines, notificationCount, runningGlyph);
+		return focused ? lines : lines.slice(0, maxLines);
+	}
+
 	const lines: string[] = [widgetHeader(runs, runningGlyph, maxLines, notificationCount)];
 
-	for (const { run, agents, snapshot } of runs) {
-		const activeAgents = agents.filter((a) => a.status === "running" || a.status === "queued" || a.status === "waiting");
+	for (const entry of runs) {
+		const { run, agents } = entry;
 		const now = Date.now();
-		const finishedAgents = agents.filter((item) => {
-			if (item.status === "running" || item.status === "queued" || item.status === "waiting") return false;
-			if (!item.completedAt) return false;
-			const maxAgeMs = (ERROR_STATUSES.has(item.status) ? ERROR_LINGER_MAX_AGE : FINISHED_LINGER_MAX_AGE) * 60_000;
-			const age = now - new Date(item.completedAt).getTime();
-			return Number.isFinite(age) && age < maxAgeMs;
-		});
+		const { active: activeAgents, finished: finishedAgents } = orderWidgetAgents(entry, now);
 		const completed = agents.filter((a) => a.status === "completed").length;
 		// WP-3 (H4): while a run is parked awaiting plan approval, the spinner
 		// glyph is replaced by a `⚠ plan:<last-8 runId>` badge. Plain-unicode ⚠
@@ -90,11 +290,6 @@ export function buildWidgetLines(
 		// activity line) and is GUARANTEED stable across ticks:
 		//   - agents count — from `agents` array, always populated, never empty.
 		//   - run elapsed   — from `run.createdAt`, always set on manifest.
-		// Both come from sources with no race window — `agents` is read from
-		// snapshot.agents OR agentsFor(run) (both always return same length
-		// for a healthy run), and `run.createdAt` is immutable. The format
-		// shape `"X/Y agents · Ns"` is therefore truly invariant: same number
-		// of `·`-separated fields, same field meanings, every render tick.
 		//
 		// Bug 022 (timer-fix + label): for TERMINAL runs (failed/cancelled/
 		// completed) the elapsed counter previously kept ticking up forever
@@ -112,56 +307,58 @@ export function buildWidgetLines(
 
 		const liveForRun = listLiveAgents().filter((a) => a.runId === run.runId);
 
-		// L-4: prioritize RUNNING > QUEUED > WAITING within the visible window so the
-		// most relevant live workers are always shown. Finished rows fill only the
-		// leftover budget and never steal slots from running agents.
-		const ACTIVE_PRIORITY: Record<string, number> = {
-			running: 0,
-			queued: 1,
-			waiting: 2,
-		};
-		const prioritizedActive = [...activeAgents].sort((a, b) => (ACTIVE_PRIORITY[a.status] ?? 9) - (ACTIVE_PRIORITY[b.status] ?? 9));
+		// Focused: list every agent so the keyboard cursor can reach it. Idle: keep
+		// the historical cap so the prompt area stays small.
+		const activeCap = focused ? activeAgents.length : MAX_AGENTS_DISPLAY;
 		// Finished rows only appear in slots not used by active agents (max 2). When
 		// there are >= MAX_AGENTS_DISPLAY live workers, finished rows are suppressed
 		// entirely so they cannot push a live agent's activity line off-screen.
-		const finishedSlots = Math.max(0, Math.min(2, MAX_AGENTS_DISPLAY - activeAgents.length));
+		const finishedSlots = focused ? finishedAgents.length : Math.max(0, Math.min(2, MAX_AGENTS_DISPLAY - activeAgents.length));
+
+		/** Cursor marker column, mirroring the inline panel's selection. */
+		const markerFor = (taskId: string): string => (options.selectedTaskId === taskId ? "❯" : " ");
 
-		const visibleAgents = prioritizedActive.slice(0, MAX_AGENTS_DISPLAY);
+		const visibleAgents = activeAgents.slice(0, activeCap);
 		for (const [index, agent] of visibleAgents.entries()) {
-			const last = index === visibleAgents.length - 1 && activeAgents.length <= MAX_AGENTS_DISPLAY && finishedSlots === 0;
+			const last = index === visibleAgents.length - 1 && activeAgents.length <= activeCap && finishedSlots === 0;
 			const branch = last ? "└─" : "├─";
-			const agentGlyph = iconForStatus(agent.status, { runningGlyph });
 			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
+			const legacyGlyph = options.viewedTaskId === agent.taskId ? "◉" : iconForStatus(agent.status, { runningGlyph });
 			const stats = agentStats(agent, liveHandle);
 			const name = liveHandle?.agent ?? agent.agent;
+			const activity = agentActivity(agent, liveHandle);
 			const desc = truncate(liveHandle?.description ?? agent.role ?? "", TASK_DESC_MAX);
-			const _activeMain = truncate(`│  ${branch} ${agentGlyph} ${name}${desc ? ` · ${desc}` : ` · ${agent.role}`}`, width);
+			const _activeMain = truncate(`│  ${branch} ${legacyGlyph} ${name}${desc ? ` · ${desc}` : ` · ${agent.role}`}`, width);
 			lines.push(_activeMain);
-			const _activity = truncate(`│     ⊶ ${agentActivity(agent, liveHandle)}${stats ? ` · ${stats}` : ""}`, width);
+			const _activity = truncate(`│     ⊶ ${activity}${stats ? ` · ${stats}` : ""}`, width);
 			lines.push(_activity);
 		}
 
-		if (activeAgents.length > MAX_AGENTS_DISPLAY) {
-			lines.push(truncate(`│  └─ … +${activeAgents.length - MAX_AGENTS_DISPLAY} more agents`, width));
+		if (activeAgents.length > activeCap) {
+			lines.push(truncate(`│  └─ … +${activeAgents.length - activeCap} more agents`, width));
 		}
 
 		for (const [index, agent] of finishedAgents.slice(0, finishedSlots).entries()) {
 			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
 			const name = liveHandle?.agent ?? agent.agent;
-			const icon =
+			const legacyIcon =
 				agent.status === "completed" ? "✓" : agent.status === "failed" ? "✗" : agent.status === "needs_attention" ? "⚠" : "▪";
 			const stats = agentStats(agent, liveHandle);
 			const desc = truncate(liveHandle?.description ?? agent.role ?? "", TASK_DESC_MAX);
 			const isLastFinished = index === Math.min(finishedAgents.length, finishedSlots) - 1;
 			const branch = isLastFinished ? "└─" : "├─";
-			const _finished = truncate(`│  ${branch} ${icon} ${name} · ${desc}${stats ? ` · ${stats}` : ""}`, width);
+			const _finished = truncate(`│  ${branch} ${legacyIcon} ${name} · ${desc}${stats ? ` · ${stats}` : ""}`, width);
 			lines.push(_finished);
 		}
 
-		if (lines.length >= maxLines) break;
+		// Focused (inline panel cursor active): the keyboard can reach every
+		// agent, so the renderer must list them ALL — clipping here would put
+		// the cursor marker (❯) on rows that are never painted. The idle
+		// widget keeps its historical cap to hold the prompt area small.
+		if (lines.length >= maxLines && !focused) break;
 	}
 
-	return lines.slice(0, maxLines);
+	return focused ? lines : lines.slice(0, maxLines);
 }
 
 // ── Colorization ──────────────────────────────────────────────────────