pi-cockpit 0.1.1 → 0.2.0

package/README.md

@@ -2,6 +2,8 @@
 
 A list-mode **agent cockpit** for [Pi](https://pi.dev): a status stack pinned **above the editor** showing live teammates and the current todo plan, plus a Starship-style footer. Everything is drawn through Pi's public extension APIs only (`setWidget` / `setFooter`) — no core patches.
 
+It is the third plugin of the `pi-maestro-flow` project (alongside `pi-maestro-flow` and `pi-maestro-teammate`). Since `pi-maestro-flow@0.6.1` it is an exact-pinned dependency of `pi-maestro-flow` — installed together and auto-registered into Pi's `settings.packages` on postinstall — but it also installs and runs standalone.
+
 ```
  ┌─ AGENTS · 2 running ─────────────────────────────┐   ← setWidget(aboveEditor)
  │ ⠋ explorer  #a1f3c2  map auth   read routes.ts   │
@@ -18,16 +20,19 @@ A list-mode **agent cockpit** for [Pi](https://pi.dev): a status stack pinned **
 
 ## Install
 
+`pi-cockpit` comes automatically with the orchestration layer — installing `pi-maestro-flow@0.6.1` pulls `pi-cockpit@0.1.1` and registers it into `settings.packages` on postinstall, no manual setup required. To use it on its own:
+
 ```bash
-pi install <path-or-spec>     # or, for one run:
-pi -e ./extensions/pi-cockpit
+pi install npm:pi-cockpit     # standalone from npm
+# or, for one run:
+pi -e ./packages/pi-cockpit
 ```
 
 ## What it shows
 
 - **AGENTS** — every running teammate as a table row (status spinner · role · id · label · live tail), sorted running-first. Collapses to a one-line `N agents running` summary in compact mode.
 - **TODO** — the active plan as numbered rows with four states (done ✓ / in-progress spinner / blocked ! / pending ·). Collapses to a segmented progress bar + current step + percent.
-- **Footer** — `provider/model · context gauge · ↑in ↓out · $cost · elapsed · git branch`.
+- **Footer** — `provider/model · context gauge · ↑in ↓out · $cost · elapsed · git branch`. Since v0.1.1, `bash_bg` background-job state lives on a **dedicated second footer row** so it no longer competes with the primary line.
 
 Toggle each block between list and compact with `/cockpit`.
 
@@ -41,6 +46,8 @@ Toggle each block between list and compact with `/cockpit`.
 
 So on a stock Pi (no teammate / no todo tool) the extension loads without error, the status stack renders nothing, and only the footer appears. The roster is **self-accumulated from event deltas** — teammates already running before the extension loads are not back-filled (the teammate extension broadcasts deltas, never a full roster). The todo list **is** back-filled on `session_start` from the persisted snapshot.
 
+This is the whole coupling story: cockpit has **no package dependency on `pi-maestro-flow`** and only a peer dependency on `pi-maestro-teammate`. It observes the other two plugins through public channels alone — teammate's event broadcasts for AGENTS, and the `todo-state` snapshot flow's `todo` tool persists for TODO. Remove either source and the matching block simply hides; the footer always remains.
+
 ## Configuration
 
 `~/.pi/agent/cockpit.json` (created on first run):
@@ -75,12 +82,12 @@ The original mockup was a browser page; a terminal is an ANSI stream with no DOM
 ## Local development
 
 ```bash
-cd extensions/pi-cockpit
+cd packages/pi-cockpit
 node --test --experimental-transform-types tests/agents-store.test.ts tests/todo-store.test.ts tests/render.test.ts tests/footer.test.ts
 ../../node_modules/.bin/tsc -p tsconfig.json     # type-check (uses the monorepo root's tsc + types)
 ```
 
-The package lives inside the `pi-maestro-flow` tree so it resolves `@earendil-works/*` types from the root `node_modules`, but it is **not** part of the `packages/*` workspace — it neither pollutes the lockfile nor gets swept by monorepo builds.
+The package lives inside the `pi-maestro-flow` monorepo under `packages/` so it resolves `@earendil-works/*` types from the root `node_modules`. Since v0.6.1 it is also an exact-pinned dependency of `pi-maestro-flow` and ships as its own npm package (`pi-cockpit`).
 
 ## License
 

package/package.json

@@ -1,70 +1,70 @@
-{
-  "name": "pi-cockpit",
-  "version": "0.1.1",
-  "description": "Agent cockpit for Pi: a list-mode status stack (live teammates + todo plan) pinned above the editor, plus a Starship-style footer. Renders only via public extension APIs (setWidget/setFooter).",
-  "type": "module",
-  "keywords": [
-    "pi-package",
-    "pi",
-    "pi-extension",
-    "tui",
-    "teammate",
-    "todo"
-  ],
-  "license": "MIT",
-  "files": [
-    "src/",
-    "themes/",
-    "README.md"
-  ],
-  "scripts": {
-    "test": "node --test --experimental-transform-types tests/agents-store.test.ts tests/bash-bg-store.test.ts tests/bash-bg-widget.test.ts tests/bash-bg-overlay.test.ts tests/todo-store.test.ts tests/render.test.ts tests/footer.test.ts tests/extension-status.test.ts tests/integration-contract.test.ts tests/stack-widget.test.ts tests/settings-view.test.ts tests/ambient.test.ts tests/viewport.test.ts tests/theme-picker.test.ts",
-    "typecheck": "tsc --noEmit"
-  },
-  "pi": {
-    "extensions": [
-      "./src/extension/index.ts"
-    ],
-    "themes": [
-      "./themes"
-    ]
-  },
-  "peerDependencies": {
-    "@earendil-works/pi-agent-core": "*",
-    "@earendil-works/pi-ai": "*",
-    "@earendil-works/pi-coding-agent": "*",
-    "@earendil-works/pi-tui": "*",
-    "pi-maestro-teammate": "^0.6.0"
-  },
-  "peerDependenciesMeta": {
-    "@earendil-works/pi-agent-core": {
-      "optional": true
-    },
-    "@earendil-works/pi-ai": {
-      "optional": true
-    },
-    "@earendil-works/pi-coding-agent": {
-      "optional": true
-    },
-    "@earendil-works/pi-tui": {
-      "optional": true
-    },
-    "pi-maestro-teammate": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@earendil-works/pi-agent-core": "0.82.1",
-    "@earendil-works/pi-ai": "0.82.1",
-    "@earendil-works/pi-coding-agent": "0.82.1",
-    "@earendil-works/pi-tui": "0.82.1",
-    "@types/node": "^22.0.0",
-    "pi-maestro-teammate": "0.6.0",
-    "typescript": "^5.5.0"
-  },
-  "main": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./src/*": "./src/*"
-  }
-}
+{
+  "name": "pi-cockpit",
+  "version": "0.2.0",
+  "description": "Agent cockpit for Pi: a list-mode status stack (live teammates + todo plan) pinned above the editor, plus a Starship-style footer. Renders only via public extension APIs (setWidget/setFooter).",
+  "type": "module",
+  "keywords": [
+    "pi-package",
+    "pi",
+    "pi-extension",
+    "tui",
+    "teammate",
+    "todo"
+  ],
+  "license": "MIT",
+  "files": [
+    "src/",
+    "themes/",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node --test --experimental-transform-types tests/agents-store.test.ts tests/bash-bg-store.test.ts tests/bash-bg-widget.test.ts tests/bash-bg-overlay.test.ts tests/todo-store.test.ts tests/render.test.ts tests/footer.test.ts tests/extension-status.test.ts tests/integration-contract.test.ts tests/stack-widget.test.ts tests/settings-view.test.ts tests/ambient.test.ts tests/viewport.test.ts tests/theme-picker.test.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "pi": {
+    "extensions": [
+      "./src/extension/index.ts"
+    ],
+    "themes": [
+      "./themes"
+    ]
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-agent-core": "*",
+    "@earendil-works/pi-ai": "*",
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*",
+    "pi-maestro-teammate": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@earendil-works/pi-agent-core": {
+      "optional": true
+    },
+    "@earendil-works/pi-ai": {
+      "optional": true
+    },
+    "@earendil-works/pi-coding-agent": {
+      "optional": true
+    },
+    "@earendil-works/pi-tui": {
+      "optional": true
+    },
+    "pi-maestro-teammate": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@earendil-works/pi-agent-core": "0.82.1",
+    "@earendil-works/pi-ai": "0.82.1",
+    "@earendil-works/pi-coding-agent": "0.82.1",
+    "@earendil-works/pi-tui": "0.82.1",
+    "@types/node": "^22.0.0",
+    "pi-maestro-teammate": "1.0.0",
+    "typescript": "^5.5.0"
+  },
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./src/*": "./src/*"
+  }
+}

package/src/agents-store.ts

@@ -41,6 +41,8 @@ export interface ProgressPayload {
 	recentTools?: Array<string | { name?: string; status?: string }>;
 	toolCount?: number;
 	tokens?: number;
+	inputTokens?: number;
+	outputTokens?: number;
 	lastMessage?: string;
 }
 export interface MessagePayload {
@@ -53,6 +55,8 @@ export interface MessagePayload {
 	recentTools?: Array<string | { name?: string; status?: string }>;
 	toolCount?: number;
 	tokens?: number;
+	inputTokens?: number;
+	outputTokens?: number;
 	status?: string;
 	lastActivityAt?: number | string;
 	progress?: ProgressPayload[];
@@ -159,6 +163,8 @@ export class AgentsStore {
 		}
 		if (typeof p.toolCount === "number") row.toolCount = p.toolCount;
 		if (typeof p.tokens === "number") row.tokens = p.tokens;
+		if (typeof p.inputTokens === "number") row.inputTokens = p.inputTokens;
+		if (typeof p.outputTokens === "number") row.outputTokens = p.outputTokens;
 		if (typeof p.status === "string") {
 			row.taskStatus = p.status;
 			row.status = mapAgentStatus(p.status);
@@ -241,6 +247,8 @@ export class AgentsStore {
 		}
 		if (typeof p.toolCount === "number") row.toolCount = p.toolCount;
 		if (typeof p.tokens === "number") row.tokens = p.tokens;
+		if (typeof p.inputTokens === "number") row.inputTokens = p.inputTokens;
+		if (typeof p.outputTokens === "number") row.outputTokens = p.outputTokens;
 		if (typeof p.lastMessage === "string" && p.lastMessage.length > 0) {
 			row.tail = truncateTail(p.lastMessage);
 		}

package/src/ambient.ts

@@ -37,7 +37,9 @@ function failedJobs(jobs: readonly BashBgJob[]): BashBgJob[] {
  * Only replace the label while a foreground tool is actively executing.
  */
 export function workingMessage(state: AmbientState): string | undefined {
-	return state.activeTool;
+	if (state.activeTool) return state.activeTool;
+	if (state.running) return "working";
+	return undefined;
 }
 
 /**

package/src/bash-bg-widget.ts

@@ -1,6 +1,5 @@
 import type { ThemeColor } from "@earendil-works/pi-coding-agent";
 import type { IconGlyphs } from "./icons.ts";
-import { sanitizeExtensionStatusText } from "./extension-status.ts";
 import { fitLineByPriority, type PrioritizedSegment } from "./layout.ts";
 import { formatDuration, type PaintTheme, type WidthUtils } from "./render.ts";
 import type { BashBgJob } from "./types.ts";
@@ -35,10 +34,7 @@ export function renderBashBgSummary(
 	].filter(Boolean).join(" · ");
 	const statusColor: ThemeColor = stopping > 0 ? "warning" : "accent";
 	const elapsed = formatDuration(options.now - current.startedAt);
-	const preview = lastOutputLine(current.outputTail);
 	const g = options.glyphs;
-	// The Alt+J hint is the only advertised route into the job detail overlay, so
-	// it outranks the command preview instead of being the first thing clipped.
 	const segments: PrioritizedSegment[] = [
 		{
 			text: theme.fg(statusColor, current.status === "stopping" ? g.blocked : options.spin),
@@ -47,24 +43,8 @@ export function renderBashBgSummary(
 		},
 		{ text: theme.fg("muted", "BG"), priority: 95, clippable: false },
 		{ text: theme.fg(statusColor, counts), priority: 90, clippable: false },
-		{ text: theme.fg("text", oneLine(current.command)), priority: 70, minWidth: 8 },
-		{ text: theme.fg("dim", `${options.hint ?? DEFAULT_BASH_BG_HINT} details`), priority: 60, clippable: false },
-		{ text: theme.fg("dim", elapsed), priority: 50, clippable: false },
-		{ text: theme.fg("mdLink", current.id), priority: 30, clippable: false },
+		{ text: theme.fg("dim", elapsed), priority: 80, clippable: false },
+		{ text: theme.fg("dim", `${options.hint ?? DEFAULT_BASH_BG_HINT} details`), priority: 70, clippable: false },
 	];
-	if (preview) segments.push({ text: theme.fg("dim", `${g.arrow} ${preview}`), priority: 20, minWidth: 8 });
 	return [fitLineByPriority(segments, width, utils, theme.fg("dim", g.separator), g.ellipsis)];
 }
-
-function lastOutputLine(output: string): string {
-	const lines = output.replace(/\r/g, "").split("\n");
-	for (let index = lines.length - 1; index >= 0; index--) {
-		const line = lines[index]?.trim();
-		if (line) return oneLine(line);
-	}
-	return "";
-}
-
-function oneLine(value: string): string {
-	return sanitizeExtensionStatusText(value);
-}

package/src/footer.ts

@@ -27,10 +27,10 @@ export interface FooterParts {
 	ctxTokens: number;
 	ctxWindow: number;
 	totals: UsageTotals;
-	git?: string;
-	agentSummary?: string;
-	bashBgStatus?: string;
-	workflowStatus?: string;
+	git?: string;
+	agentSummary?: string;
+	bashBgStatus?: string;
+	workflowStatus?: string;
 	extensionStatuses?: readonly ExtensionStatusSegment[];
 	width: number;
 	glyphs: IconGlyphs;
@@ -207,7 +207,9 @@ export function renderFooter(p: FooterParts): string[] {
 		(status) => isVisibleExtensionStatus(status, p.thinking),
 	);
 	const controlStatuses = visibleStatuses.filter(
-		(status) => status.key === "approval-mode" || status.key === "maestro-auto-compact-mode",
+		(status) => status.key === "mode"
+			|| status.key === "approval-mode"
+			|| status.key === "maestro-auto-compact-mode",
 	);
 
 	// line 1: prioritized identity and control segments
@@ -323,14 +325,14 @@ export function renderFooter(p: FooterParts): string[] {
 	}
 	if (!selected) fittedLeft = fitLeftBeside("");
 
-	const line1 = alignRight(fittedLeft.join(identitySeparator), right1, width, utils.measure);
-	const lines = [utils.clip(line1, width, ell)];
-	if (p.bashBgStatus) {
-		lines.push(utils.clip(p.bashBgStatus, width, ell));
-	}
-	if (p.workflowStatus) {
-		lines.push(utils.clip(theme.fg("muted", p.workflowStatus), width, ell));
-	}
+	const line1 = alignRight(fittedLeft.join(identitySeparator), right1, width, utils.measure);
+	const lines = [utils.clip(line1, width, ell)];
+	if (p.bashBgStatus) {
+		lines.push(utils.clip(p.bashBgStatus, width, ell));
+	}
+	if (p.workflowStatus) {
+		lines.push(utils.clip(theme.fg("muted", p.workflowStatus), width, ell));
+	}
 	const statuses = visibleStatuses.filter((status) => !controlStatuses.includes(status));
 	if (statuses.length > 0) {
 		const statusSeparator = ` ${sep} `;

package/src/index.ts

@@ -2,17 +2,17 @@ import { isAbsolute, relative, resolve, sep } from "node:path";
 import type { ExtensionAPI, ExtensionCommandContext, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import type { TUI } from "@earendil-works/pi-tui";
 import { Key, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { AgentsStore, type CompletePayload, type MessagePayload, type StartedPayload } from "./agents-store.ts";
-import { statusText, titleFor, workingMessage, type AmbientState } from "./ambient.ts";
-import { BashBgStore } from "./bash-bg-store.ts";
-import { BashBgOverlay } from "./bash-bg-overlay.ts";
-import { renderBashBgSummary } from "./bash-bg-widget.ts";
-import { TodoStore } from "./todo-store.ts";
+import { AgentsStore, type CompletePayload, type MessagePayload, type StartedPayload } from "./agents-store.ts";
+import { statusText, titleFor, workingMessage, type AmbientState } from "./ambient.ts";
+import { BashBgStore } from "./bash-bg-store.ts";
+import { BashBgOverlay } from "./bash-bg-overlay.ts";
+import { renderBashBgSummary } from "./bash-bg-widget.ts";
+import { TodoStore } from "./todo-store.ts";
 import { makeTodoWidget, makeAgentWidget, terminalRows } from "./stack-widget.ts";
 import { activeThemeName, ThemePicker } from "./theme-picker.ts";
 import { getUsageTotals, invalidateUsageCache, renderFooter, type PaintTheme, type WidthUtils } from "./footer.ts";
 import { collectExtensionStatuses } from "./extension-status.ts";
-import { ANIMATION_PERIOD_MS, resolveGlyphs, spinFrame } from "./icons.ts";
+import { ANIMATION_PERIOD_MS, resolveGlyphs, spinFrame } from "./icons.ts";
 import { ensureConfigExists, loadConfig, saveConfig } from "./config.ts";
 import { applyRow, buildRows, rowKeyForAccel, type SaveState } from "./settings-view.ts";
 import {
@@ -133,6 +133,7 @@ export default function (pi: ExtensionAPI): void {
 		pi.events.emit(COCKPIT_UI_OWNERSHIP_EVENT, {
 			todo: config.enabled,
 			agents: config.enabled && config.hideNativeAgents,
+			footer: config.enabled,
 			todoExpanded: config.todoExpanded,
 		});
 	};
@@ -181,12 +182,12 @@ export default function (pi: ExtensionAPI): void {
 		ctx.ui.setWidget(
 			AGENT_WIDGET_KEY,
 			(tui, theme) => {
-				capturedTui = tui;
-				return makeAgentWidget({
-					getAgents: () => agents.snapshot(),
-					getConfig: () => config,
-					isRunning: () => running,
-					isAnimating,
+				capturedTui = tui;
+				return makeAgentWidget({
+					getAgents: () => agents.snapshot(),
+					getConfig: () => config,
+					isRunning: () => running,
+					isAnimating,
 				})(tui, theme);
 			},
 			{ placement: "belowEditor" },
@@ -210,23 +211,23 @@ export default function (pi: ExtensionAPI): void {
 			const component = {
 				render(width: number): string[] {
 					if (Number.isFinite(width) && width > 0) observedWidth = width;
-					const cu = ctx.getContextUsage();
-					const branch = footerData.getGitBranch();
-					const extensionStatuses = collectExtensionStatuses(footerData.getExtensionStatuses());
-					const glyphs = resolveGlyphs(config.icons.mode);
-					const now = Date.now();
-					const bashBgStatus = renderBashBgSummary(
-						bashBg.snapshot(),
-						width,
-						theme,
-						FOOTER_UTILS,
-						{
-							glyphs,
-							spin: spinFrame(glyphs, now, isAnimating()),
-							now,
-						},
-					)[0];
-					return renderFooter({
+					const cu = ctx.getContextUsage();
+					const branch = footerData.getGitBranch();
+					const extensionStatuses = collectExtensionStatuses(footerData.getExtensionStatuses());
+					const glyphs = resolveGlyphs(config.icons.mode);
+					const now = Date.now();
+					const bashBgStatus = renderBashBgSummary(
+						bashBg.snapshot(),
+						width,
+						theme,
+						FOOTER_UTILS,
+						{
+							glyphs,
+							spin: spinFrame(glyphs, now, isAnimating()),
+							now,
+						},
+					)[0];
+					return renderFooter({
 						width,
 						model: ctx.model?.id ?? "no-model",
 						provider: ctx.model?.provider,
@@ -234,13 +235,13 @@ export default function (pi: ExtensionAPI): void {
 						cwd: formatCwd(ctx.sessionManager.getCwd()),
 						ctxPct: cu?.percent ?? 0,
 						ctxTokens: cu?.tokens ?? 0,
-						ctxWindow: cu?.contextWindow ?? ctx.model?.contextWindow ?? 0,
-						totals: getUsageTotals(ctx.sessionManager.getEntries()),
-						git: branch ?? undefined,
-						bashBgStatus,
-						workflowStatus: extensionStatuses.find((status) => status.key === WORKFLOW_STATUS_KEY)?.text,
-						extensionStatuses: extensionStatuses.filter((status) => status.key !== WORKFLOW_STATUS_KEY),
-						glyphs,
+						ctxWindow: cu?.contextWindow ?? ctx.model?.contextWindow ?? 0,
+						totals: getUsageTotals(ctx.sessionManager.getEntries()),
+						git: branch ?? undefined,
+						bashBgStatus,
+						workflowStatus: extensionStatuses.find((status) => status.key === WORKFLOW_STATUS_KEY)?.text,
+						extensionStatuses: extensionStatuses.filter((status) => status.key !== WORKFLOW_STATUS_KEY),
+						glyphs,
 						theme,
 						utils: FOOTER_UTILS,
 					});
@@ -316,8 +317,13 @@ export default function (pi: ExtensionAPI): void {
 		// through /settings since — including an automatic "light/dark" pair, which
 		// cockpit cannot represent and would silently flatten to a single theme.
 		todos.hydrateFromEntries(ctx.sessionManager.getEntries());
-		applyUi(ctx);
-		publishUiOwnership();
+		if (config.enabled) {
+			publishUiOwnership();
+			applyUi(ctx);
+		} else {
+			applyUi(ctx);
+			publishUiOwnership();
+		}
 		pi.events.emit(BASH_BG_QUERY_EVENT, undefined);
 		req();
 	});
@@ -327,6 +333,7 @@ export default function (pi: ExtensionAPI): void {
 		pi.events.emit(COCKPIT_UI_OWNERSHIP_EVENT, {
 			todo: false,
 			agents: false,
+			footer: false,
 			todoExpanded: config.todoExpanded,
 		});
 		lastCtx = undefined;
@@ -520,10 +527,16 @@ export default function (pi: ExtensionAPI): void {
 					? { kind: "saved" }
 					: { kind: "failed", message: result.error ?? "unknown error" };
 				if (wasEnabled !== config.enabled) {
-					if (config.enabled) applyUi(ctx);
-					else uninstallUi(ctx);
+					if (config.enabled) {
+						publishUiOwnership();
+						applyUi(ctx);
+					} else {
+						uninstallUi(ctx);
+						publishUiOwnership();
+					}
+				} else {
+					publishUiOwnership();
 				}
-				publishUiOwnership();
 				req();
 			};
 			const ui = {

package/src/render.ts

@@ -106,6 +106,16 @@ export function formatDuration(ms: number): string {
 	return `${h}h ${m}m ${s}s`;
 }
 
+export function formatAgentMetric(value: number): string {
+	if (value < 100) return String(value);
+	if (value < 999_950) return `${trimMetric(value / 1_000)}k`;
+	return `${trimMetric(value / 1_000_000)}m`;
+}
+
+function trimMetric(value: number): string {
+	return value.toFixed(1).replace(/\.0$/, "");
+}
+
 // Role is identity, status is state — they must not share a palette. Reusing
 // success/warning/error for roles meant a green row could mean "executor" or
 // "done", and every theme inherits that ambiguity. Roles therefore draw from the
@@ -236,7 +246,12 @@ export function renderAgents(
 		if (r.activeTool) segs.push({ text: theme.fg("accent", `tool ${r.activeTool}`), priority: 50, minWidth: 8 });
 		if (r.tail) segs.push({ text: theme.fg("dim", r.tail), priority: 40, minWidth: 8 });
 		if (r.toolCount !== undefined) segs.push({ text: theme.fg("muted", `${r.toolCount} tools`), priority: 20, clippable: false });
-		if (r.tokens !== undefined) segs.push({ text: theme.fg("muted", `${r.tokens} tok`), priority: 10, clippable: false });
+		if (r.inputTokens !== undefined || r.outputTokens !== undefined) {
+			const usage = `in ${formatAgentMetric(r.inputTokens ?? 0)} · out ${formatAgentMetric(r.outputTokens ?? 0)}`;
+			segs.push({ text: theme.fg("muted", usage), priority: 10, clippable: false });
+		} else if (r.tokens !== undefined) {
+			segs.push({ text: theme.fg("muted", `${formatAgentMetric(r.tokens)} tok`), priority: 10, clippable: false });
+		}
 		return fitLineByPriority(segs, width, utils, " ", g.ellipsis);
 	});
 	if (hidden > 0) {
@@ -246,22 +261,18 @@ export function renderAgents(
 }
 
 const TODO_MAX_VISIBLE = 8;
-const RECENT_COMPLETED_MS = 30_000;
 
-function todoDisplayRank(item: TodoItem, now: number): number {
-	if (item.status === "completed") {
-		const recent = item.updatedAt !== undefined && now - item.updatedAt < RECENT_COMPLETED_MS;
-		return recent ? 0 : 4;
-	}
-	if (item.status === "in_progress") return 1;
-	if (item.status === "blocked") return 2;
-	return 3;
+const TODO_STATUS_RANK: Record<string, number> = { in_progress: 0, blocked: 1, pending: 2, completed: 3 };
+
+function todoStatusRank(status: string): number {
+	return TODO_STATUS_RANK[status] ?? 4;
 }
 
-function findNextTodo(items: readonly TodoItem[]): TodoItem | undefined {
-	return items.find((i) => i.status === "in_progress")
-		?? items.find((i) => i.status === "pending" && i.blockedBy.length === 0)
-		?? items.find((i) => i.status === "blocked" || i.status === "pending");
+// Tasks keep their creation order (the numeric id assigned at allocateTaskId).
+// Non-numeric ids (workflow mirrors) sort after numeric ones, then lexicographically.
+function todoIdOrder(id: string): number {
+	const n = Number(id);
+	return Number.isInteger(n) ? n : Number.POSITIVE_INFINITY;
 }
 
 function todoActorLabel(actor: NonNullable<TodoItem["assignee"]>, items: readonly TodoItem[]): string {
@@ -318,22 +329,6 @@ function todoSubject(paint: TodoPaint, subject: string, theme: PaintTheme): stri
 	return paint.bold ? bold(theme, text) : text;
 }
 
-function todoNextLabel(
-	item: TodoItem,
-	items: readonly TodoItem[],
-	glyphs: IconGlyphs,
-	spin: string,
-	theme: PaintTheme,
-): string {
-	const actor = todoActor(item, items);
-	const paint = todoPaint(item.status, glyphs, spin);
-	return [
-		theme.fg(paint.glyphColor, paint.glyph),
-		actor ? theme.fg("mdLink", actor) : "",
-		todoSubject(paint, item.subject, theme),
-	].filter(Boolean).join(" ");
-}
-
 export function renderTodos(
 	items: readonly TodoItem[],
 	mode: ViewMode,
@@ -346,7 +341,6 @@ export function renderTodos(
 	const g = opts.glyphs;
 	const ell = theme.fg("dim", g.ellipsis);
 	const spin = opts.spin ?? "~";
-	const now = opts.now ?? Date.now();
 	const expanded = opts.expanded !== false;
 	const toggleHint = opts.toggleHint ?? DEFAULT_TOGGLE_HINT;
 
@@ -355,17 +349,11 @@ export function renderTodos(
 		const done = items.filter((i) => i.status === "completed").length;
 		const blocked = items.filter((i) => i.status === "blocked").length;
 		const pct = total ? Math.round((done / total) * 100) : 0;
-		const nxt = findNextTodo(items);
-		const label = nxt
-			? `${theme.fg("dim", g.arrow)} ${todoNextLabel(nxt, items, g, spin, theme)}`
-			: done === total ? theme.fg("success", `${g.check} all done`) : "";
 		const segs: PrioritizedSegment[] = [
 			{ text: renderTodoBar(items, width, theme, g), priority: 60, clippable: false },
 			{ text: theme.fg("muted", `${pct}%`), priority: 90, clippable: false },
 		];
-		// A glyph run is opaque to a screen reader, so the blocked count is spelled out.
 		if (blocked > 0) segs.push({ text: theme.fg("error", `${blocked} blocked`), priority: 95, clippable: false });
-		if (label) segs.push({ text: label, priority: 100, minWidth: 8 });
 		segs.push({ text: theme.fg("dim", `(${toggleHint} expand)`), priority: 10, clippable: false });
 		return [fitLineByPriority(segs, width, utils, " ", g.ellipsis)];
 	}
@@ -377,17 +365,10 @@ export function renderTodos(
 	const blocked = items.filter((i) => i.status === "blocked").length;
 	const members = new Set(items.map((item) => item.assignee?.id).filter(Boolean)).size;
 	const sep = theme.fg("dim", g.separator.trim());
-	const nxt = findNextTodo(items);
-	const nextText = nxt
-		? `${theme.fg(nxt.status === "blocked" ? "error" : "dim", g.arrow)} ${todoNextLabel(nxt, items, g, spin, theme)}`
-		: theme.fg("success", `${g.check} all done`);
 
-	// The next actionable task outranks the counts: it is the one token that tells
-	// the user what to do, so it must survive when the terminal is narrow.
 	const summarySegs: PrioritizedSegment[] = [
 		{ text: theme.fg("syntaxFunction", "Todo"), priority: 40, clippable: false },
 		{ text: theme.fg("dim", `${done}/${total}`), priority: 80, clippable: false },
-		{ text: nextText, priority: 100, minWidth: 8 },
 	];
 	if (blocked > 0) {
 		summarySegs.push({ text: theme.fg("error", `${blocked} blocked`), priority: 90, clippable: false });
@@ -398,6 +379,21 @@ export function renderTodos(
 	if (members > 0) {
 		summarySegs.push({ text: theme.fg("dim", `${members} members`), priority: 30, clippable: false });
 	}
+	// Creation order drives both the next-task pointer and the expanded rows, so
+	// compute it once up front. The pointer is the first task the user can act on:
+	// not done, not blocked, and free of unresolved dependencies.
+	const ordered = [...items].sort((a, b) =>
+		todoStatusRank(a.status) - todoStatusRank(b.status)
+		|| todoIdOrder(a.id) - todoIdOrder(b.id)
+		|| (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
+	);
+	const next = ordered.find((it) => it.status !== "completed" && it.status !== "blocked" && it.blockedBy.length === 0);
+	if (next) {
+		const np = todoPaint(next.status, g, spin);
+		const nactor = todoActor(next, items);
+		const ntext = `${g.arrow} ${theme.fg(np.glyphColor, np.glyph)}${nactor ? ` ${theme.fg("mdLink", nactor)}` : ""} ${todoSubject(np, next.subject, theme)}`;
+		summarySegs.push({ text: ntext, priority: 20, clippable: false });
+	}
 	summarySegs.push({
 		text: theme.fg("dim", `(${toggleHint} ${expanded ? "collapse" : "expand"})`),
 		priority: 10,
@@ -406,9 +402,6 @@ export function renderTodos(
 	const summaryLine = fitLineByPriority(summarySegs, width, utils, ` ${sep} `, g.ellipsis);
 
 	if (!expanded) return [summaryLine];
-
-	// sorted + capped task rows
-	const ordered = [...items].sort((a, b) => todoDisplayRank(a, now) - todoDisplayRank(b, now));
 	// The summary line is already spent, so the task rows compete for what is left.
 	const budget = Math.min(
 		TODO_MAX_VISIBLE + 1,

package/src/types.ts

@@ -35,6 +35,8 @@ export interface AgentRow {
 	lastActivityAt: number;
 	toolCount?: number;
 	tokens?: number;
+	inputTokens?: number;
+	outputTokens?: number;
 	taskStatus?: string;
 	activeTool?: string;
 	taskIndex?: number;