@ferris1225/pi-subagents 4.1.21 → 4.1.24

package/src/setup.ts

@@ -248,6 +248,9 @@ async function runFullSetup(ctx: ExtensionCommandContext, configPath: string, ba
 
 	const next: SubagentsConfig = {
 		enabledAgents: enabled,
+		// The wizard surfaces every built-in, so an untoggled one was seen and
+		// deliberately left off — record them all as known.
+		knownAgents: [...BUILTIN_AGENT_NAMES],
 		agentModels,
 		// Full setup returns every agent to capability-aware Auto thinking.
 		agentThinkingLevels: {},
@@ -283,23 +286,17 @@ async function runMenu(ctx: ExtensionCommandContext, configPath: string, config:
 			const enabled = await pickEnabledAgents(ctx, config.enabledAgents);
 			if (enabled === undefined) continue;
 			next.enabledAgents = enabled;
-			// A newly enabled role inherits a kindred role's configured model and
+			// A newly enabled role inherits explorer's configured model and
 			// thinking level, so the file reflects what it will actually run
-			// instead of silently falling back to the current main model: cleaner
-			// follows the reviewer; documenter and synthesizer intentionally
-			// follow the faster explorer route.
-			const modelInheritance: ReadonlyArray<[agent: string, from: string]> = [
-				["cleaner", "reviewer"],
-				["documenter", "explorer"],
-				["synthesizer", "explorer"],
-			];
-			for (const [agent, from] of modelInheritance) {
-				if (config.enabledAgents.includes(agent) || !enabled.includes(agent)) continue;
-				if (!next.agentModels[agent] && config.agentModels[from]) {
-					next.agentModels[agent] = config.agentModels[from];
+			// instead of silently falling back to the current main model: these
+			// roles do light migration-grade work on the fast explorer lane.
+			for (const agent of enabled) {
+				if (agent === "explorer" || config.enabledAgents.includes(agent)) continue;
+				if (!next.agentModels[agent] && config.agentModels.explorer) {
+					next.agentModels[agent] = config.agentModels.explorer;
 				}
-				if (!next.agentThinkingLevels[agent] && config.agentThinkingLevels[from]) {
-					next.agentThinkingLevels[agent] = config.agentThinkingLevels[from];
+				if (!next.agentThinkingLevels[agent] && config.agentThinkingLevels.explorer) {
+					next.agentThinkingLevels[agent] = config.agentThinkingLevels.explorer;
 				}
 			}
 			next.agentModels = keepAgentEntries(next.agentModels, enabled);

package/src/widget.ts

@@ -2,16 +2,24 @@
  * Compact, glanceable active-run widget for interactive Pi sessions.
  *
  * Layout contract (redesign):
- * - Aligned columns: `icon  #id  agent` pad to the widest displayed id and
- *   agent so every label starts at the same column; a resumed thread carries
- *   a dim `↻` inside the agent column.
- * - Visual hierarchy: the label (what the run owns) is plain, the live
- *   activity after ` — ` is dim, and all telemetry — worktree badge,
- *   model/thinking, wait state, elapsed — is one dim right-aligned column,
- *   so times and states line up at the right edge.
- * - Two lines per managed workflow: the stable parent line plus a `└`-connected
- *   stage timeline; the live stage's activity/model/elapsed rides right-aligned
- *   on the timeline line. Internal child rows are not repeated as extra lines.
+ * - Aligned identity columns: `icon  #id  agent` pad to the widest displayed
+ *   id and agent so every label starts at the same column; a resumed thread
+ *   carries a dim `↻` inside the agent column.
+ * - A live run owns two lines. Line 1 is what it is: identity, task label,
+ *   then the telemetry flow (`provider/model`, token flow in the pi-footer
+ *   vocabulary `↑in ↓out R/W cache`, cost, wait state, seconds-precision
+ *   elapsed). Line 2 is what it is doing right now: the live activity, dim,
+ *   indented under the label column behind a `↳` marker.
+ * - Telemetry drops leftmost-first under width pressure (badge, wait, usage,
+ *   model); the elapsed survives every width.
+ * - First line of the widget is the parent pi session itself: what the current
+ *   model is doing right now while its agent loop runs (model/thinking, live
+ *   activity, loop elapsed), fed by the session's own extension events.
+ * - A managed workflow renders as a tree chain under its parent line: one
+ *   `├`/`└`-connected row per stage, each carrying its own model, token flow,
+ *   and elapsed — settled stages from the snapshot frozen at settlement, the
+ *   live stage from its child row. An oversized chain keeps a window anchored
+ *   on the live stage.
  * - Queued rows say what they actually wait for ("queued" for a process slot,
  *   "repo lane" for shared-writer serialization, "starting" while the child
  *   process launches) instead of one catch-all "queued".
@@ -20,14 +28,22 @@
 import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import {
+	formatDuration,
 	formatElapsed,
 	formatTaskSummary,
+	formatUsageTokens,
 	isRunActiveStatus,
 	monitor,
+	shrinkRunLabel,
 	statusIcon,
+	sumUsage,
+	usageCostPart,
+	type MainActivity,
 	type RunView,
 	type WorkflowStage,
+	type WorkflowStageStatus,
 } from "./monitor.ts";
+import type { UsageStats } from "./rpc-run.ts";
 
 export const SUBAGENTS_WIDGET_ID = "pi-subagents";
 
@@ -38,8 +54,10 @@ const MAX_WIDGET_LINES = 10;
 const SEPARATOR = " · ";
 /** Column gap between the identity block and the run's label. */
 const IDENTITY_GAP = "  ";
-/** Splits "what this run is" from "what it is doing right now". */
+/** Splits "what this run is" from "what it is doing right now" on a stage row. */
 const ACTIVITY_SEPARATOR = " — ";
+/** Marker introducing the live-activity second line of a running row. */
+const ACTIVITY_MARKER = "↳ ";
 /** Columns kept for left content before right-tail parts are dropped. */
 const LEFT_MIN_CONTENT = 8;
 /** Minimum useful width for a live-activity fragment. */
@@ -53,17 +71,13 @@ interface ColumnLayout {
 	agentWidth: number;
 }
 
-/** Compose one widget line with a right-aligned telemetry column: the left
- * side truncates first, the right side stays put so elapsed times and badges
- * line up across rows. */
-function layoutLine(left: string, right: string, width: number): string {
-	if (width <= 0) return "";
-	if (!right) return truncateToWidth(left, width, "…");
-	const rightWidth = visibleWidth(right);
-	if (rightWidth >= width) return truncateToWidth(right, width, "");
-	const leftBudget = width - rightWidth - 1;
-	const leftText = visibleWidth(left) > leftBudget ? truncateToWidth(left, leftBudget, "…") : left;
-	return `${leftText}${" ".repeat(Math.max(1, width - visibleWidth(leftText) - rightWidth))}${right}`;
+/** Join left content and telemetry inline — `left · telemetry` — so a
+ * multi-line chain reads as one flowing sentence instead of leaving blank
+ * padding across the width; the whole line truncates as a last resort. */
+function composeLine(left: string, tail: string, theme: Theme, width: number): string {
+	if (!tail) return truncateToWidth(left, width, "…");
+	const line = `${left}${theme.fg("dim", SEPARATOR)}${theme.fg("dim", tail)}`;
+	return visibleWidth(line) <= width ? line : truncateToWidth(line, width, "…");
 }
 
 /** Short truthful wait word for a queued row, shown in the telemetry column. */
@@ -124,145 +138,229 @@ function identitySegment(run: RunView, theme: Theme, layout: ColumnLayout): stri
 	return `${icon} ${theme.fg("dim", id)} ${name}${resumed}${pad}`;
 }
 
-/** One primary line per run. Left: identity  label — activity, where the
- * label stays plain and the live activity is dim. Right: one dim telemetry
- * column (worktree badge, model/thinking, wait state, elapsed). The activity
- * outranks the label when space runs out; the identity and elapsed survive
- * every width. */
-function primaryLine(run: RunView, theme: Theme, width: number, now: number, layout: ColumnLayout): string {
-	const dim = (text: string): string => theme.fg("dim", text);
-	const identity = identitySegment(run, theme, layout);
-	const elapsed = formatElapsed(run, now);
-	const modelId = run.model?.split("/").at(-1);
+/** One footer-style usage part: token flow plus accrued cost, dropped as a
+ * unit before the model under width pressure. */
+function usagePart(usage: UsageStats | undefined): string | undefined {
+	return [formatUsageTokens(usage), usageCostPart(usage)].filter(Boolean).join(" ") || undefined;
+}
+
+/** Telemetry tail parts shared by primary and stage rows: badge and wait word
+ * first (dropped first under pressure), then the usage part, the model, and
+ * the always-surviving elapsed. `usage` defaults to the run's own; the managed
+ * workflow parent overrides it with the workflow-wide aggregate. */
+function telemetryTailParts(run: RunView, now: number, usage: UsageStats = run.usage): Array<string | undefined> {
 	// Queued rows omit the model (the route is re-resolved at actual start);
-	// workflow parents omit it too (each stage owns its own model).
-	const modelPart = run.status === "queued" || run.managedWorkflow || !modelId
+	// workflow parents omit it too (each stage row owns its own model). The
+	// full provider/model ref is kept — "which provider served this run" is
+	// exactly what a multi-provider session needs to see.
+	const modelPart = run.status === "queued" || run.managedWorkflow || !run.model
 		? undefined
-		: `${modelId}${run.thinking ? `/${run.thinking}` : ""}`;
+		: run.model;
 	const badge = run.isolation === "worktree" ? worktreeBadge(run) : undefined;
 	const wait = run.status === "queued" ? waitWord(run) : undefined;
-	const tailBudget = Math.max(0, width - visibleWidth(identity) - LEFT_MIN_CONTENT);
-	// Drop order under pressure: badge, then model, then wait word; elapsed
+	// Drop order under pressure: badge, wait word, usage, model; elapsed
 	// survives every width the identity leaves room for.
-	const tail = composeTail([badge, modelPart, wait, elapsed || undefined], tailBudget);
+	return [badge, wait, usagePart(usage), modelPart, formatElapsed(run, now) || undefined];
+}
+
+/** Two lines for a live run. Line 1 is what the run is: identity, task label,
+ * then the telemetry flow (worktree badge, token flow, cost, provider/model,
+ * wait state, elapsed). Line 2 is what it is doing right now: the live
+ * activity, dim, indented under the label column behind a `↳` marker. The
+ * label takes the full content budget on line 1; the identity and the elapsed
+ * survive every width. */
+function primaryLine(
+	run: RunView,
+	theme: Theme,
+	width: number,
+	now: number,
+	layout: ColumnLayout,
+	usage: UsageStats = run.usage,
+): string[] {
+	const identity = identitySegment(run, theme, layout);
+	const tailBudget = Math.max(0, width - visibleWidth(identity) - LEFT_MIN_CONTENT);
+	const tail = composeTail(telemetryTailParts(run, now, usage), tailBudget);
 
 	// A chain child rendered at root level (its parent row is gone) keeps its
 	// workflow relation; the templated brief itself would only repeat content.
 	const label = run.parentRunId !== undefined
 		? [run.relationLabel, run.label].filter((part): part is string => Boolean(part)).join(SEPARATOR)
 		: run.label ?? formatTaskSummary(run.task, 48);
+	const contentBudget = width
+		- visibleWidth(identity)
+		- (tail ? visibleWidth(tail) + visibleWidth(SEPARATOR) : 0)
+		- visibleWidth(IDENTITY_GAP);
+	// The label is already fragment-extracted (runLabel); narrowing it keeps
+	// its tail so a second squeeze never trades away the recognisable
+	// filename, and no second head…tail ellipsis stacks on top of it.
+	const content = label && contentBudget > 0 ? shrinkRunLabel(label, contentBudget) : "";
+	const left = content ? `${identity}${IDENTITY_GAP}${content}` : identity;
+	const lines = [composeLine(left, tail, theme, width)];
+
 	// The parent's own activity is a placeholder while a managed workflow runs;
-	// the timeline line below carries the live stage instead.
+	// the timeline chain below carries the live stage instead.
 	const activity = !run.managedWorkflow && (run.status === "running" || run.status === "interrupting")
 		? run.activity?.trim()
 		: undefined;
-
-	const contentBudget = width
-		- visibleWidth(identity)
-		- (tail ? visibleWidth(tail) + 1 : 0)
-		- visibleWidth(IDENTITY_GAP);
-	let content = "";
-	if (contentBudget > 0) {
-		const labelBudget = activity
-			? Math.min(visibleWidth(label), Math.max(12, Math.floor(contentBudget * 0.4)))
-			: contentBudget;
-		// The label is already fragment-extracted (runLabel); plain right
-		// truncation avoids stacking a second head…tail ellipsis on top of it.
-		const labelText = label
-			? visibleWidth(label) > labelBudget ? truncateToWidth(label, labelBudget, "…") : label
-			: "";
-		if (activity) {
-			const activityBudget = contentBudget
-				- visibleWidth(labelText)
-				- (labelText ? visibleWidth(ACTIVITY_SEPARATOR) : 0);
-			content = activityBudget >= ACTIVITY_MIN_WIDTH
-				? `${labelText}${labelText ? dim(ACTIVITY_SEPARATOR) : ""}${dim(formatTaskSummary(activity, activityBudget))}`
-				// Too narrow for both: the live activity is the stronger signal.
-				: dim(formatTaskSummary(activity, contentBudget));
-		} else {
-			content = labelText;
+	if (activity) {
+		const indent = visibleWidth(identity) + visibleWidth(IDENTITY_GAP);
+		const activityBudget = width - indent - visibleWidth(ACTIVITY_MARKER);
+		if (activityBudget >= ACTIVITY_MIN_WIDTH) {
+			lines.push(
+				`${" ".repeat(indent)}${theme.fg("dim", `${ACTIVITY_MARKER}${formatTaskSummary(activity, activityBudget)}`)}`,
+			);
 		}
 	}
-
-	const left = content ? `${identity}${IDENTITY_GAP}${content}` : identity;
-	return layoutLine(left, tail ? dim(tail) : "", width);
+	return lines;
 }
 
-function workflowStageToken(stage: WorkflowStage, theme: Theme): string {
-	const content = (icon: string): string => `${icon} ${stage.relation}`;
-	switch (stage.status) {
+function stageIcon(status: WorkflowStageStatus, theme: Theme): string {
+	switch (status) {
 		case "done":
-			return theme.fg("success", content("✓"));
+			return theme.fg("success", "✓");
 		case "active":
-			return theme.fg("accent", theme.bold(content("●")));
+			return theme.fg("accent", theme.bold("●"));
 		case "changes":
-			return theme.fg("warning", content("!"));
+			return theme.fg("warning", "!");
 		case "failed":
-			return theme.fg("error", content("✗"));
+			return theme.fg("error", "✗");
 		default:
-			return theme.fg("dim", content("○"));
+			return theme.fg("dim", "○");
 	}
 }
 
-/** Stage timeline, sliced from the active (or next actionable) stage when the
- * full sequence does not fit, so the current position always survives. */
-function timelineSegment(stages: readonly WorkflowStage[], theme: Theme, width: number): string {
-	const separator = theme.fg("dim", " ─ ");
-	const render = (items: readonly WorkflowStage[]): string =>
-		items.map((stage) => workflowStageToken(stage, theme)).join(separator);
-	const full = render(stages);
-	if (visibleWidth(full) <= width) return full;
-	let focusIndex = stages.findIndex((stage) => stage.status === "active");
-	if (focusIndex === -1) {
-		focusIndex = stages.findLastIndex((stage) => stage.status === "changes" || stage.status === "failed");
+/** Stage telemetry source: the live child while the stage runs, the frozen
+ * snapshot once it has settled. */
+interface StageTelemetry {
+	model?: string;
+	thinking?: string;
+	usage?: UsageStats;
+	elapsed: string;
+	activity?: string;
+}
+
+function stageTelemetry(
+	stage: WorkflowStage,
+	live: RunView | undefined,
+	now: number,
+): StageTelemetry {
+	if (live) {
+		return {
+			model: live.model,
+			thinking: live.thinking,
+			usage: live.usage,
+			elapsed: formatElapsed(live, now),
+			activity: live.activity?.trim() || undefined,
+		};
 	}
-	if (focusIndex === -1) focusIndex = stages.findIndex((stage) => stage.status === "pending");
-	if (focusIndex === -1) focusIndex = stages.length - 1;
-	const omittedPrefix = focusIndex > 0 ? theme.fg("dim", "… ─ ") : "";
-	return truncateToWidth(`${omittedPrefix}${render(stages.slice(focusIndex))}`, width, "…");
+	return { model: stage.model, usage: stage.usage, elapsed: stage.elapsedMs !== undefined ? formatDuration(stage.elapsedMs) : "" };
 }
 
-/** Timeline line under a managed workflow parent, tied to it with a dim `└`.
- * The live stage's telemetry (its activity or model, plus stage elapsed) rides
- * right-aligned, so the two workflow lines replace what used to be four
- * (parent, timeline, child row, child activity). */
-function workflowTimelineLine(
-	run: RunView,
+/** The parent pi session's own line — what the current model is doing right
+ * now while its agent loop runs: full model/thinking ref, live activity, loop
+ * elapsed. Not a run, so it owns no `#id`; it joins the identity layout so its
+ * label column lines up with the run rows. */
+function mainLine(main: MainActivity, theme: Theme, width: number, now: number, layout: ColumnLayout): string {
+	const dim = (text: string): string => theme.fg("dim", text);
+	const icon = theme.fg("accent", "●");
+	const name = theme.fg("accent", theme.bold("pi"));
+	const pad = " ".repeat(Math.max(0, layout.agentWidth - visibleWidth("pi")));
+	const identity = `${icon} ${" ".repeat(layout.idWidth + 1)}${name}${pad}`;
+	const modelPart = main.model ? `${main.model}${main.thinking ? `/${main.thinking}` : ""}` : undefined;
+	const elapsed = formatDuration(Math.max(0, now - main.activeSince));
+	const tail = composeTail([modelPart, elapsed], Math.max(0, width - visibleWidth(identity) - LEFT_MIN_CONTENT));
+	const contentBudget = width
+		- visibleWidth(identity)
+		- (tail ? visibleWidth(tail) + visibleWidth(SEPARATOR) : 0)
+		- visibleWidth(IDENTITY_GAP);
+	let left = identity;
+	if (main.activity?.trim() && contentBudget >= ACTIVITY_MIN_WIDTH) {
+		left = `${identity}${IDENTITY_GAP}${dim(formatTaskSummary(main.activity.trim(), contentBudget))}`;
+	}
+	return composeLine(left, tail, theme, width);
+}
+
+/** One `├`/`└`-connected row per managed-workflow stage: status icon,
+ * relation, live activity for the running stage, and its own model/token/
+ * cost/elapsed telemetry flowing inline. The chain hangs off the parent line,
+ * so who dispatched what stays visible while the auto-fix workflow progresses. */
+function workflowStageLines(
+	stages: readonly WorkflowStage[],
 	children: readonly RunView[],
 	theme: Theme,
 	width: number,
 	now: number,
-): string | undefined {
-	const stages = run.workflowStages;
-	const indent = `  ${theme.fg("dim", "└")} `;
-	const budget = width - visibleWidth(indent);
-	if (!stages || stages.length === 0 || budget <= 0) return undefined;
-	const child = children.find((candidate) => candidate.status === "running" || candidate.status === "interrupting")
+): { lines: string[]; activeIndex: number } {
+	const live = children.find((candidate) => candidate.status === "running" || candidate.status === "interrupting")
 		?? children.at(-1);
-	const childDoing = child?.activity?.trim() || child?.model?.split("/").at(-1) || "";
-	const childElapsed = child ? formatElapsed(child, now) : "";
-	const timeline = timelineSegment(stages, theme, budget);
-	const room = budget - visibleWidth(timeline) - 1;
-	let tail = "";
-	if (room >= ACTIVITY_MIN_WIDTH) {
-		const doingBudget = room - (childElapsed ? visibleWidth(childElapsed) + (childDoing ? visibleWidth(SEPARATOR) : 0) : 0);
-		const doingText = childDoing && doingBudget >= ACTIVITY_MIN_WIDTH
-			? formatTaskSummary(childDoing, doingBudget)
-			: "";
-		const parts = [doingText, childElapsed].filter(Boolean);
-		if (parts.length > 0) tail = theme.fg("dim", parts.join(SEPARATOR));
+	const activeIndex = stages.findIndex((stage) => stage.status === "active");
+	const lines: string[] = [];
+	for (const [index, stage] of stages.entries()) {
+		const telemetry = stageTelemetry(stage, index === activeIndex ? live : undefined, now);
+		const connector = theme.fg("dim", index === stages.length - 1 ? "└" : "├");
+		const indent = `  ${connector} `;
+		const budget = width - visibleWidth(indent);
+		if (budget <= 0) break;
+		const icon = stageIcon(stage.status, theme);
+		const label = `${icon} ${stage.relation}`;
+		const modelPart = telemetry.model
+			? `${telemetry.model}${telemetry.thinking ? `/${telemetry.thinking}` : ""}`
+			: undefined;
+		const parts = [
+			usagePart(telemetry.usage),
+			modelPart,
+			telemetry.elapsed || undefined,
+		];
+		const tailBudget = Math.max(0, budget - visibleWidth(label) - ACTIVITY_MIN_WIDTH);
+		const tail = composeTail(parts, tailBudget);
+		const contentBudget = budget - (tail ? visibleWidth(tail) + visibleWidth(SEPARATOR) : 0);
+		let left = label;
+		if (telemetry.activity && contentBudget - visibleWidth(label) - visibleWidth(ACTIVITY_SEPARATOR) >= ACTIVITY_MIN_WIDTH) {
+			const activityBudget = contentBudget - visibleWidth(label) - visibleWidth(ACTIVITY_SEPARATOR);
+			left = `${label}${theme.fg("dim", ACTIVITY_SEPARATOR)}${theme.fg("dim", formatTaskSummary(telemetry.activity, activityBudget))}`;
+		}
+		lines.push(`${indent}${composeLine(left, tail, theme, budget)}`);
 	}
-	return `${indent}${layoutLine(timeline, tail, budget)}`;
+	return { lines, activeIndex };
+}
+
+/** Fit one workflow group into the remaining line budget: the primary lines
+ * (identity line plus the live-activity line) always survive, and the stage
+ * window anchors on the live stage — settled stages above the window collapse
+ * into one `… +N` marker, never the live stage itself. */
+function fitGroupLines(
+	primary: readonly string[],
+	stages: readonly string[],
+	activeIndex: number,
+	remaining: number,
+	theme: Theme,
+): string[] {
+	if (primary.length > remaining) return primary.slice(0, Math.max(1, remaining));
+	if (stages.length === 0 || stages.length + primary.length <= remaining) return [...primary, ...stages];
+	const slots = remaining - primary.length;
+	// Reserve one line for an overflow marker so a cut is always announced.
+	const room = Math.max(1, slots - 1);
+	const anchor = activeIndex >= 0 ? activeIndex : 0;
+	const start = Math.max(0, Math.min(anchor, stages.length - room));
+	const window = stages.slice(start, start + room);
+	const parts = [
+		...(start > 0 ? [theme.fg("dim", `… +${start}`)] : []),
+		...window,
+		...(start + room < stages.length ? [theme.fg("dim", `… +${stages.length - start - room}`)] : []),
+	];
+	while (parts.length > slots) parts.pop();
+	return [...primary, ...parts];
 }
 
-/** Render active runs as compact per-run line groups: one line per simple run,
- * two per managed workflow. Internal stage children fold into their parent's
- * timeline instead of adding rows, and all rows share one column layout. */
+/** Render active runs as compact per-run line groups: the parent model's own
+ * line first, then one two-line group per simple run, a tree chain per managed
+ * workflow (parent line + one row per stage). All rows share one column layout. */
 export function formatActiveRunLines(
 	runs: readonly RunView[],
 	theme: Theme,
 	width: number,
 	now: number = Date.now(),
+	main?: MainActivity,
 ): string[] {
 	const active = runs.filter((run) => isRunActiveStatus(run.status));
 	const activeIds = new Set(active.map((run) => run.id));
@@ -279,24 +377,39 @@ export function formatActiveRunLines(
 	}
 	const layout: ColumnLayout = {
 		idWidth: Math.max(...roots.map((root) => visibleWidth(`#${root.id}`)), 0),
-		agentWidth: Math.max(...roots.map((root) => visibleWidth(agentColumnText(root))), 0),
+		agentWidth: Math.max(...roots.map((root) => visibleWidth(agentColumnText(root))), main ? visibleWidth("pi") : 0),
 	};
-	const groups: string[][] = roots.map((root) => {
-		const lines = [primaryLine(root, theme, width, now, layout)];
-		const timeline = root.managedWorkflow
-			? workflowTimelineLine(root, childrenOf.get(root.id) ?? [], theme, width, now)
-			: undefined;
-		if (timeline) lines.push(timeline);
-		return lines;
+	const groups: Array<{ primary: readonly string[]; stages: readonly string[]; activeIndex: number }> = roots.map((root) => {
+		const children = childrenOf.get(root.id) ?? [];
+		// Workflow-wide tokens/cost on the parent line: every stage snapshot plus
+		// the live child (whose snapshot is frozen only at settlement). Without
+		// a stage projection the parent's own usage stands in.
+		let usage = root.usage;
+		if (root.managedWorkflow && root.workflowStages) {
+			const settled = root.workflowStages.map((stage) => stage.usage).filter((u): u is UsageStats => Boolean(u));
+			const live = children.find((candidate) => candidate.usage.input || candidate.usage.output || candidate.usage.cost);
+			usage = sumUsage([...(settled.length > 0 ? settled : [root.usage]), ...(live ? [live.usage] : [])]);
+		}
+		const primary = primaryLine(root, theme, width, now, layout, usage);
+		let activeIndex = -1;
+		let stages: readonly string[] = [];
+		if (root.managedWorkflow && root.workflowStages && root.workflowStages.length > 0) {
+			const rendered = workflowStageLines(root.workflowStages, children, theme, width, now);
+			stages = rendered.lines;
+			activeIndex = rendered.activeIndex;
+		}
+		return { primary, stages, activeIndex };
 	});
 
 	const lines: string[] = [];
+	if (main && MAX_WIDGET_LINES > 1) {
+		lines.push(mainLine(main, theme, width, now, layout));
+	}
 	let shownRoots = 0;
 	for (const group of groups) {
 		const remaining = MAX_WIDGET_LINES - 1 - lines.length;
 		if (remaining <= 0) break;
-		// A group that no longer fits whole keeps its primary line only.
-		lines.push(...(group.length <= remaining ? group : group.slice(0, remaining)));
+		lines.push(...fitGroupLines(group.primary, group.stages, group.activeIndex, remaining, theme));
 		shownRoots++;
 	}
 	const hiddenRoots = roots.length - shownRoots;
@@ -307,13 +420,13 @@ export function formatActiveRunLines(
 }
 
 function hasTickingRun(): boolean {
-	return monitor.getRuns().some(
-		(run) => isRunActiveStatus(run.status) && run.activeSince !== undefined,
-	);
+	return monitor.isMainAgentActive()
+		|| monitor.getRuns().some((run) => isRunActiveStatus(run.status) && run.activeSince !== undefined);
 }
 
-/** Install the widget for one TUI session. Its timer exists only while at least
- * one active run has started and is disposed with the widget. */
+/** Install the widget for one TUI session. Its timer exists only while at
+ * least one active run has started or the parent agent loop is running, and
+ * is disposed with the widget. */
 export function installActiveRunsWidget(ctx: Pick<ExtensionContext, "mode" | "ui">): void {
 	if (ctx.mode !== "tui") return;
 	ctx.ui.setWidget(
@@ -341,7 +454,7 @@ export function installActiveRunsWidget(ctx: Pick<ExtensionContext, "mode" | "ui
 			syncTimer();
 
 			return {
-				render: (width: number) => formatActiveRunLines(monitor.getRuns(), theme, width),
+				render: (width: number) => formatActiveRunLines(monitor.getRuns(), theme, width, Date.now(), monitor.getMainActivity()),
 				invalidate() {},
 				dispose() {
 					disposed = true;