pi-crew 0.10.1 → 0.10.3

package/src/ui/widget/index.ts

@@ -11,6 +11,9 @@ import { DEFAULT_UI } from "../../config/defaults.ts";
 import type { ManifestCache } from "../../runtime/manifest-cache.ts";
 import type { TeamRunManifest } from "../../state/types.ts";
 import { truncate } from "../../utils/visual.ts";
+import { isFooterDockSinkActive, setFooterDockProvider } from "../dock-footer.ts";
+import { panelRowsFromRuns } from "../inline-panel/panel-rows.ts";
+import { panelDisplayState, setPanelRowsProvider, subscribePanelChange } from "../inline-panel/panel-store.ts";
 import { requestRender, requestRenderTarget, setExtensionWidget } from "../pi-ui-compat.ts";
 import type { OverlaySchedulerHandle } from "../shared-overlay-scheduler.ts";
 import { registerOverlayScheduler } from "../shared-overlay-scheduler.ts";
@@ -18,6 +21,7 @@ import type { RunSnapshotCache } from "../snapshot-types.ts";
 import { spinnerBucket, spinnerFrame } from "../spinner.ts";
 import type { CrewTheme } from "../theme-adapter.ts";
 import { asCrewTheme, subscribeThemeChange } from "../theme-adapter.ts";
+import { buildTaskListLines } from "./task-list.ts";
 import { activeWidgetRuns, statusSummary } from "./widget-model.ts";
 import { buildWidgetLines, colorWidgetLine, DEFAULT_WIDGET_WIDTH, renderLines } from "./widget-renderer.ts";
 import type { CrewWidgetModel, CrewWidgetState, WidgetRun } from "./widget-types.ts";
@@ -62,6 +66,8 @@ export {
 const MAX_LINES_DEFAULT = DEFAULT_UI.widgetMaxLines;
 const LEGACY_WIDGET_KEY = "pi-crew";
 const WIDGET_KEY = "pi-crew-active";
+/** The run's plan progress, painted ABOVE the editor (task-list.ts). */
+const TASKS_WIDGET_KEY = "pi-crew-tasks";
 const STATUS_KEY = "pi-crew";
 
 /**
@@ -78,11 +84,12 @@ const SIGNATURE_CACHE_TTL_MS = 100;
 // next invalidate; a mid-run resize could briefly paint a frame at the old
 // width. We register ONE debounced process-level listener (guarded so it never
 // accumulates across widget reinstalls) that busts the active widget's cache
-// and pokes Pi to repaint at the new width. The listener references a
-// module-level `activeResizeTarget` (the most-recently-mounted widget) rather
-// than a specific instance, so replaced widgets do not leak listeners.
+// and pokes Pi to repaint at the new width. The listener references the
+// module-level `activeResizeTargets` set (every mounted widget) rather than
+// specific instances, so replaced widgets do not leak listeners.
 let resizeListenerInstalled = false;
-let activeResizeTarget: { invalidate(): void; requestRepaint(): void } | undefined;
+/** All mounted widgets (dock + task list) — every one gets resize-busted. */
+const activeResizeTargets = new Set<{ invalidate(): void; requestRepaint(): void }>();
 let resizeTimer: ReturnType<typeof setTimeout> | undefined;
 
 /**
@@ -95,8 +102,10 @@ const onResize = (): void => {
 	// Debounce (~120ms) so a drag-resize doesn't thrash renders.
 	resizeTimer = setTimeout(() => {
 		resizeTimer = undefined;
-		activeResizeTarget?.invalidate();
-		activeResizeTarget?.requestRepaint();
+		for (const target of activeResizeTargets) {
+			target.invalidate();
+			target.requestRepaint();
+		}
 	}, 120);
 };
 
@@ -134,7 +143,7 @@ export function uninstallResizeListener(): void {
 		clearTimeout(resizeTimer);
 		resizeTimer = undefined;
 	}
-	activeResizeTarget = undefined;
+	activeResizeTargets.clear();
 	process.off("SIGWINCH", onResize);
 	// Windows has no SIGWINCH; Node emits "resize" on stdout instead.
 	// Remove via whichever API is present. The listener was only registered
@@ -159,6 +168,8 @@ interface WidgetComponent extends CrewComponent {}
 class CrewWidgetComponent implements WidgetComponent {
 	private readonly model: CrewWidgetModel;
 	private theme: CrewTheme;
+	/** Which surface this instance paints: the agent dock, or the task list. */
+	private readonly variant: "dock" | "tasks";
 	private cacheSignature = "";
 	/** C4 — invalidate-on-write cache for the buildSignature() result. */
 	private cachedBuildSignature = "";
@@ -166,13 +177,23 @@ class CrewWidgetComponent implements WidgetComponent {
 	private cachedWidth = 0;
 	private cachedLines: string[] = [];
 	private cachedBaseLines: string[] = [];
+	/**
+	 * PERF (2026-08-24): truncate at build time, re-truncate only on width
+	 * change — cache hits returned a fresh array + ANSI-aware width measurement
+	 * per line on every frame. `cachedLines` stays raw (unclipped) so a width
+	 * change can re-clip without a full rebuild; -1 marks "not truncated yet".
+	 */
+	private truncatedLines: string[] = [];
+	private lastTruncateWidth = -1;
 	private cachedTheme: CrewTheme;
 	private readonly tui: unknown;
 	private readonly unsubscribeTheme: () => void;
+	private readonly unsubscribePanel: () => void;
 	private readonly schedulerHandle: OverlaySchedulerHandle;
 
-	constructor(model: CrewWidgetModel, themeLike: unknown, tui?: unknown) {
+	constructor(model: CrewWidgetModel, themeLike: unknown, tui?: unknown, variant: "dock" | "tasks" = "dock") {
 		this.model = model;
+		this.variant = variant;
 		this.theme = asCrewTheme(themeLike);
 		this.cachedTheme = this.theme;
 		this.tui = tui;
@@ -180,9 +201,16 @@ class CrewWidgetComponent implements WidgetComponent {
 		// terminal-resize listener is installed. On a resize the cached width
 		// goes stale; busting the cache + requesting a repaint refreshes the
 		// widget at the new width without waiting for the next event tick (T-2).
-		activeResizeTarget = this;
+		activeResizeTargets.add(this);
 		installResizeListener();
 		this.unsubscribeTheme = subscribeThemeChange(themeLike, () => this.invalidate());
+		// Cursor movement is a keypress, not a run event, so it never reaches the
+		// shared scheduler. Repaint directly instead of waiting for the next host
+		// tick — a lagging cursor reads as a dropped keystroke.
+		this.unsubscribePanel = subscribePanelChange(() => {
+			this.invalidate();
+			this.requestRepaint();
+		});
 		// 1.10 (UI-P1-1): route run:state / worker:lifecycle / ui:invalidate
 		// through a RenderScheduler (debounce + fallback) instead of three
 		// direct runEventBus.onChannel subscriptions. With 3 overlays
@@ -254,10 +282,23 @@ class CrewWidgetComponent implements WidgetComponent {
 		this.cacheSignature = "";
 		this.cachedBaseLines = [];
 		this.cachedLines = [];
+		this.truncatedLines = [];
+		this.lastTruncateWidth = -1;
 		this.cachedBuildSignature = "";
 		this.cachedBuildSignatureAt = 0;
 	}
 
+	/**
+	 * PERF (2026-08-24): clip `cachedLines` to `width` only when the width
+	 * changed since the last clip — the raw lines are stored unclipped so a
+	 * resize re-clips them without rebuilding the whole cache.
+	 */
+	private ensureTruncated(width: number): void {
+		if (width === this.lastTruncateWidth) return;
+		this.truncatedLines = this.cachedLines.map((line) => truncate(line, width));
+		this.lastTruncateWidth = width;
+	}
+
 	/** Poke the host TUI to repaint immediately (defensive: no-op if unavailable). */
 	requestRepaint(): void {
 		requestRenderTarget(this.tui);
@@ -265,8 +306,9 @@ class CrewWidgetComponent implements WidgetComponent {
 
 	dispose(): void {
 		this.unsubscribeTheme();
+		this.unsubscribePanel();
 		this.schedulerHandle.dispose();
-		if (activeResizeTarget === this) activeResizeTarget = undefined;
+		activeResizeTargets.delete(this);
 	}
 
 	render(width: number): string[] {
@@ -295,7 +337,37 @@ class CrewWidgetComponent implements WidgetComponent {
 		const signature = `${sigBase}:${this.model.notificationCount ?? 0}`;
 		const runningGlyph = spinnerFrame("widget-header");
 
-		if (this.cacheSignature !== signature || width !== this.cachedWidth || this.cachedTheme !== this.theme) {
+		// Task-list variant: the run's plan above the editor (task-list.ts).
+		// No panel state, no spinner glyph — the list changes only on task
+		// transitions, which the run signature already covers.
+		if (this.variant === "tasks") {
+			if (this.cacheSignature !== signature || width !== this.cachedWidth || this.cachedTheme !== this.theme) {
+				this.cachedBaseLines = buildTaskListLines(runs, width);
+				this.cachedLines = this.colorize(this.cachedBaseLines, width);
+				this.cachedWidth = width;
+				this.cachedTheme = this.theme;
+				this.cacheSignature = signature;
+				this.lastTruncateWidth = -1;
+			}
+			if (runs.length === 0) {
+				this.invalidate();
+				return [];
+			}
+			this.ensureTruncated(width);
+			return this.truncatedLines;
+		}
+
+		// Panel cursor/pane state is part of the rendered output, so it belongs in
+		// the cache key — otherwise moving the cursor would not repaint.
+		const panel = panelDisplayState();
+		const signatureWithPanel = `${signature}|panel:${panel.selectedTaskId ?? ""}/${panel.viewedTaskId ?? ""}/${panel.focused ? 1 : 0}`;
+
+		// The spinner-frame swap only belongs on the LEGACY header, whose line 0
+		// already starts with a glyph position (`<frame> Crew agents …`). The
+		// compact dock's line 0 is the HINT text ("agents (N) — ↓ to select"):
+		// swapping would visibly eat its first character on every frame.
+		const compactDock = this.model.rowStyle === "compact";
+		if (this.cacheSignature !== signatureWithPanel || width !== this.cachedWidth || this.cachedTheme !== this.theme) {
 			this.cachedBaseLines = buildWidgetLines(
 				this.model.cwd,
 				0,
@@ -303,14 +375,16 @@ class CrewWidgetComponent implements WidgetComponent {
 				runs,
 				this.model.notificationCount ?? 0,
 				width,
+				{ rowStyle: this.model.rowStyle, ...panel },
 			).map((line, index) => {
-				if (index === 0 && line.length > 0) return `${runningGlyph}${line.slice(1)}`;
+				if (!compactDock && index === 0 && line.length > 0) return `${runningGlyph}${line.slice(1)}`;
 				return line;
 			});
 			this.cachedLines = this.colorize(this.cachedBaseLines, width);
 			this.cachedWidth = width;
 			this.cachedTheme = this.theme;
-			this.cacheSignature = signature;
+			this.cacheSignature = signatureWithPanel;
+			this.lastTruncateWidth = -1;
 		}
 
 		if (runs.length === 0) {
@@ -323,9 +397,42 @@ class CrewWidgetComponent implements WidgetComponent {
 			return [];
 		}
 
-		const updatedHeader = `${runningGlyph}${this.cachedBaseLines[0]?.slice(1) ?? ""}`;
-		this.cachedLines[0] = truncate(colorWidgetLine(updatedHeader, 0, this.theme), width);
-		return this.cachedLines.map((line) => truncate(line, width));
+		this.ensureTruncated(width);
+		if (!compactDock) {
+			const updatedHeader = `${runningGlyph}${this.cachedBaseLines[0]?.slice(1) ?? ""}`;
+			this.cachedLines[0] = truncate(colorWidgetLine(updatedHeader, 0, this.theme), width);
+			this.truncatedLines[0] = truncate(this.cachedLines[0], width);
+		}
+		return this.truncatedLines;
+	}
+}
+
+// ── Footer dock host (widgetPlacement: "bottom") ──────────────────────
+
+/**
+ * Dock host for `widgetPlacement: "bottom"`. Keeps a single CrewWidgetComponent
+ * (theme-less → raw lines, no ANSI) per session and feeds its render output to
+ * the crew-vibes footer through the dock-footer registry. The footer colors the
+ * lines with ITS OWN theme so the dock matches the footer context. All caching,
+ * event wiring (panel changes, run events, resize) lives in the wrapped
+ * component; the footer is re-rendered by pi on every host repaint.
+ */
+class FooterDockHost {
+	private component: CrewWidgetComponent | undefined;
+	private readonly model: CrewWidgetModel;
+
+	constructor(model: CrewWidgetModel) {
+		this.model = model;
+	}
+
+	render(width: number): string[] {
+		if (!this.component) this.component = new CrewWidgetComponent(this.model, undefined, undefined);
+		return this.component.render(width);
+	}
+
+	dispose(): void {
+		this.component?.dispose();
+		this.component = undefined;
 	}
 }
 
@@ -355,20 +462,37 @@ export function updateCrewWidget(
 	}
 
 	const runs = activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache, preloadedManifests, workspaceId);
-	const lines = buildWidgetLines(ctx.cwd, state.frame, maxLines, runs, state.notificationCount ?? 0, getRenderWidth());
+	const rowStyle = config?.widgetRowStyle ?? DEFAULT_UI.widgetRowStyle;
+	// The inline panel navigates the same run list the widget paints, and this is
+	// the only place already holding the manifest/snapshot caches — so the row
+	// projection is registered here instead of re-reading state on every keypress.
+	setPanelRowsProvider(() => panelRowsFromRuns(activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache, preloadedManifests, workspaceId)));
 	const placement = config?.widgetPlacement ?? DEFAULT_UI.widgetPlacement;
+	// `bottom` is not a pi widget slot: the dock then renders inside the
+	// crew-vibes footer (dock-footer registry). pi's slot calls always use a
+	// real slot so legacy-clear/installs stay on maps pi understands.
+	const bottomMode = placement === "bottom";
+	const dockInFooter = bottomMode && isFooterDockSinkActive();
+	const piPlacement: "aboveEditor" | "belowEditor" = bottomMode ? "belowEditor" : placement;
 
-	ctx.ui.setStatus(STATUS_KEY, lines.length ? statusSummary(runs) : undefined);
+	// PERF (2026-08-24): the persistent CrewWidgetComponent renders itself from
+	// state.frame; the built line set was only ever used for its .length.
+	ctx.ui.setStatus(STATUS_KEY, runs.length > 0 ? statusSummary(runs) : undefined);
 
 	const shouldClearLegacy = state.legacyCleared !== true || state.lastPlacement !== placement;
 	if (shouldClearLegacy) {
-		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement });
+		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement: piPlacement });
 		state.legacyCleared = true;
 	}
 
-	if (!lines.length) {
+	if (runs.length === 0) {
 		if (state.lastVisibility !== "hidden" || state.lastPlacement !== placement) {
-			setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement });
+			setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement: piPlacement });
+			setExtensionWidget(ctx, TASKS_WIDGET_KEY, undefined, { placement: "aboveEditor" });
+			state.lastTasksVisibility = "hidden";
+			state.footerDock?.dispose();
+			state.footerDock = undefined;
+			setFooterDockProvider(undefined);
 			state.lastVisibility = "hidden";
 			state.lastPlacement = placement;
 			state.lastKey = WIDGET_KEY;
@@ -398,6 +522,7 @@ export function updateCrewWidget(
 			snapshotCache,
 			preloadManifests: preloadedManifests,
 			workspaceId,
+			rowStyle,
 		};
 	else {
 		state.model.cwd = ctx.cwd;
@@ -408,12 +533,33 @@ export function updateCrewWidget(
 		state.model.snapshotCache = snapshotCache;
 		state.model.preloadManifests = preloadedManifests;
 		state.model.workspaceId = workspaceId;
+		state.model.rowStyle = rowStyle;
+	}
+
+	if (dockInFooter) {
+		// Keep pi's widget slot free: the crew-vibes footer paints the dock at
+		// the very bottom, below the quota/meter lines. A widget-slot install
+		// from a PREVIOUS placement (or a sink that was just enabled) must be
+		// removed first.
+		if (needsWidgetInstall && state.lastKey === WIDGET_KEY) {
+			setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement: piPlacement });
+		}
+		if (!state.footerDock) state.footerDock = new FooterDockHost(state.model);
+		setFooterDockProvider((width) => state.footerDock!.render(width));
+	} else {
+		// Widget-slot path (aboveEditor/belowEditor, or no footer sink for
+		// "bottom"): ensure any stale footer dock is detached first.
+		if (state.footerDock) {
+			state.footerDock.dispose();
+			state.footerDock = undefined;
+		}
+		setFooterDockProvider(undefined);
 	}
 
-	if (needsWidgetInstall) {
+	if (needsWidgetInstall && !dockInFooter) {
 		const model = state.model;
 		setExtensionWidget(ctx, WIDGET_KEY, ((_tui: unknown, theme: unknown) => new CrewWidgetComponent(model, theme, _tui)) as never, {
-			placement,
+			placement: piPlacement,
 			persist: true,
 		});
 		state.lastVisibility = "visible";
@@ -421,6 +567,32 @@ export function updateCrewWidget(
 		state.lastKey = WIDGET_KEY;
 		state.lastMaxLines = maxLines;
 		state.lastCwd = ctx.cwd;
+	} else if (dockInFooter) {
+		state.lastVisibility = "visible";
+		state.lastPlacement = placement;
+		state.lastKey = WIDGET_KEY;
+		state.lastMaxLines = maxLines;
+		state.lastCwd = ctx.cwd;
+	}
+
+	// Task list (aboveEditor): the run's plan progress — Claude Code / droid
+	// style, independent of the dock's placement (so it also shows when the
+	// dock renders in the crew-vibes footer). Installed once while any
+	// display-active run exists; the component paints nothing until a run
+	// carries a tasks slice.
+	const tasksVisible = runs.length > 0 && Boolean(state.model);
+	if (tasksVisible && state.lastTasksVisibility !== "visible") {
+		const model = state.model;
+		setExtensionWidget(
+			ctx,
+			TASKS_WIDGET_KEY,
+			((_tui: unknown, theme: unknown) => new CrewWidgetComponent(model, theme, _tui, "tasks")) as never,
+			{ placement: "aboveEditor" },
+		);
+		state.lastTasksVisibility = "visible";
+	} else if (!tasksVisible && state.lastTasksVisibility === "visible") {
+		setExtensionWidget(ctx, TASKS_WIDGET_KEY, undefined, { placement: "aboveEditor" });
+		state.lastTasksVisibility = "hidden";
 	}
 
 	requestRender(ctx);
@@ -436,9 +608,15 @@ export function stopCrewWidget(
 	uninstallResizeListener();
 	if (ctx?.hasUI) {
 		const placement = config?.widgetPlacement ?? DEFAULT_UI.widgetPlacement;
+		const piPlacement: "aboveEditor" | "belowEditor" = placement === "bottom" ? "belowEditor" : placement;
 		ctx.ui.setStatus(STATUS_KEY, undefined);
-		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement });
-		setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement });
+		setExtensionWidget(ctx, LEGACY_WIDGET_KEY, undefined, { placement: piPlacement });
+		setExtensionWidget(ctx, WIDGET_KEY, undefined, { placement: piPlacement });
+		setExtensionWidget(ctx, TASKS_WIDGET_KEY, undefined, { placement: "aboveEditor" });
+		state.lastTasksVisibility = "hidden";
+		state.footerDock?.dispose();
+		state.footerDock = undefined;
+		setFooterDockProvider(undefined);
 		state.lastVisibility = "hidden";
 		state.lastPlacement = placement;
 		state.lastKey = WIDGET_KEY;

package/src/ui/widget/task-list.ts

@@ -0,0 +1,198 @@
+/**
+ * task-list.ts — the run's plan, painted above the editor (pi-tasks /
+ * Claude Code style): a `● N tasks (…)` header, then one row per task in
+ * PLAN ORDER with task numbers (#1, #2, …) instead of technical ids.
+ * Completed rows are dimmed and struck through; the task actively executing
+ * carries a spinner frame with elapsed time and token counts; queued rows
+ * name the dependencies they wait on.
+ *
+ * Example:
+ * ```
+ * ● 4 tasks (1 done, 1 in progress, 2 open)
+ *   ✔ #1 Design the flux capacitor
+ *   ⠙ #2 Wire the overlay scroll (2m 49s · ↑ 4.1k ↓ 1.2k)
+ *   ◻ #3 Run the suite › blocked by #2
+ *   ◻ #4 Report the result
+ * ```
+ *
+ * Pure plan surface: which worker/agent/model runs a task is the dock's
+ * story below the editor, never the plan's. Pure display — the interactive
+ * surface stays that dock. Rows come from the run snapshot's `tasks` slice
+ * (plan order), so the list repaints on task transitions only; the running
+ * row's spinner/elapsed/token suffix rides the render signature's spinner
+ * bucket while any worker is alive.
+ */
+
+import type { TeamTaskState } from "../../state/types.ts";
+import { truncate } from "../../utils/visual.ts";
+import { spinnerFrame } from "../spinner.ts";
+import { shortRunLabel } from "./widget-model.ts";
+import type { WidgetRun } from "./widget-types.ts";
+
+/** Task rows painted before the "… and N more" overflow line (pi-tasks
+ *  defaults its `maxVisible` to 10). */
+const MAX_TASK_ROWS = 10;
+
+const ACTIVE_TASK_STATUSES = new Set(["running", "queued", "waiting", "needs_attention"]);
+
+// pi-tasks-style strikethrough + dim for completed rows: raw SGR because the
+// theme adapter has no strike; the truncate/colorize paths are ANSI-aware.
+const DIM_ON = "\x1b[2m";
+const DIM_OFF = "\x1b[22m";
+const STRIKE_ON = "\x1b[9m";
+const STRIKE_OFF = "\x1b[29m";
+
+function isDoneStatus(status: string): boolean {
+	return status === "completed" || status === "failed" || status === "cancelled" || status === "skipped";
+}
+
+function taskTitle(task: TeamTaskState): string {
+	return (task.displayName ?? task.title ?? "").replace(/\s+/g, " ").trim();
+}
+
+/** pi-tasks status glyph per row: ✔ done (struck through), spinner for the
+ *  actively executing task, ◼ parked/needs input, ◻ queued, ✗ dead. */
+function taskStatusIcon(task: TeamTaskState): string {
+	switch (task.status) {
+		case "running":
+			return spinnerFrame("crew-task-list");
+		case "queued":
+			return "◻";
+		case "waiting":
+		case "needs_attention":
+			return "◼";
+		case "completed":
+			return "✔";
+		case "failed":
+		case "cancelled":
+		case "skipped":
+			return "✗";
+		default:
+			return "?";
+	}
+}
+
+/** `45s` / `2m 49s` / `1h 03m`. */
+function formatDuration(ms: number): string {
+	if (!Number.isFinite(ms) || ms < 0) return "";
+	const totalSeconds = Math.floor(ms / 1000);
+	if (totalSeconds < 60) return `${totalSeconds}s`;
+	const minutes = Math.floor(totalSeconds / 60);
+	if (minutes < 60) return `${minutes}m ${String(totalSeconds % 60).padStart(2, "0")}s`;
+	const hours = Math.floor(minutes / 60);
+	return `${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
+}
+
+/** `4.1k` / `1.2M` / `918` — no unit suffix; the arrow pair carries it. */
+function compactTokens(count: number): string {
+	if (typeof count !== "number" || !Number.isFinite(count) || count <= 0) return "";
+	if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
+	if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k`;
+	return `${count}`;
+}
+
+/** `(2m 49s · ↑ 4.1k ↓ 1.2k)` — elapsed plus tokens, pi-tasks style. Live
+ *  totals come from agentProgress until the final usage lands. */
+function runningSuffix(task: TeamTaskState): string {
+	const parts: string[] = [];
+	const start = Date.parse(task.startedAt ?? "");
+	if (Number.isFinite(start) && start > 0) {
+		const end = task.finishedAt ? Date.parse(task.finishedAt) : Date.now();
+		const elapsed = formatDuration(end - start);
+		if (elapsed) parts.push(elapsed);
+	}
+	const input = task.usage?.input ?? 0;
+	const output = task.usage?.output ?? 0;
+	if (input > 0 || output > 0) {
+		parts.push(`↑ ${compactTokens(input) || "0"} ↓ ${compactTokens(output) || "0"}`);
+	} else {
+		const live = compactTokens(task.agentProgress?.tokens ?? 0);
+		if (live) parts.push(live);
+	}
+	return parts.length ? ` (${parts.join(" · ")})` : "";
+}
+
+/** `› blocked by #2, #3` for queued tasks — open (non-completed)
+ *  dependencies only, named by task number (pi-tasks display rule). */
+function blockedSuffix(task: TeamTaskState, tasks: readonly TeamTaskState[], numberById: Map<string, number>): string {
+	if (task.status !== "queued") return "";
+	const openDeps = (task.dependsOn ?? [])
+		.map((depId) => tasks.find((entry) => entry.id === depId))
+		.filter((dep): dep is TeamTaskState => dep !== undefined && dep.status !== "completed");
+	if (openDeps.length === 0) return "";
+	const labels = openDeps.map((dep) => `#${numberById.get(dep.id) ?? "?"}`);
+	return ` › blocked by ${labels.join(", ")}`;
+}
+
+/** One line per task: `#n title` behind its status glyph — pi-tasks style.
+ *  Completed titles are dimmed and struck through. */
+function taskRow(
+	task: TeamTaskState,
+	taskNumber: number,
+	tasks: readonly TeamTaskState[],
+	numberById: Map<string, number>,
+	width: number,
+): string {
+	const title = taskTitle(task);
+	const suffix = task.status === "running" ? runningSuffix(task) : blockedSuffix(task, tasks, numberById);
+	if (task.status === "completed") {
+		const struck = `${STRIKE_ON}${DIM_ON}#${taskNumber} ${title}${DIM_OFF}${STRIKE_OFF}`;
+		return truncate(`  ✔ ${struck}`.trimEnd(), width);
+	}
+	return truncate(`  ${taskStatusIcon(task)} #${taskNumber} ${title}${suffix}`.trimEnd(), width);
+}
+
+/** The run whose plan is shown: the first with unfinished work, else the first. */
+function primaryRun(runs: readonly WidgetRun[]): WidgetRun | undefined {
+	return runs.find((entry) => (entry.snapshot?.tasks ?? []).some((task) => ACTIVE_TASK_STATUSES.has(task.status))) ?? runs[0];
+}
+
+/** Which rows fit the cap: plan order, but never drop an unfinished task —
+ *  if active work falls outside the first MAX_TASK_ROWS rows it stays and
+ *  finished rows give way instead. */
+function visibleTasks(tasks: readonly TeamTaskState[]): TeamTaskState[] {
+	if (tasks.length <= MAX_TASK_ROWS) return [...tasks];
+	const active = tasks.filter((task) => ACTIVE_TASK_STATUSES.has(task.status));
+	if (active.length >= MAX_TASK_ROWS) return active.slice(0, MAX_TASK_ROWS);
+	const keep = new Set(active.map((task) => task.id));
+	for (const task of tasks) {
+		if (keep.size >= MAX_TASK_ROWS) break;
+		keep.add(task.id);
+	}
+	return tasks.filter((task) => keep.has(task.id));
+}
+
+/**
+ * Build the task-list lines for the current runs. Empty when no run carries a
+ * tasks slice (nothing to say — the dock alone stays).
+ */
+export function buildTaskListLines(runs: readonly WidgetRun[], width: number): string[] {
+	const entry = primaryRun(runs);
+	if (!entry) return [];
+	const tasks = entry.snapshot?.tasks ?? [];
+	if (tasks.length === 0) return [];
+
+	const numberById = new Map(tasks.map((task, index) => [task.id, index + 1]));
+	const done = tasks.filter((task) => task.status === "completed").length;
+	const dead = tasks.filter((task) => isDoneStatus(task.status) && task.status !== "completed").length;
+	const inProgress = tasks.filter(
+		(task) => task.status === "running" || task.status === "waiting" || task.status === "needs_attention",
+	).length;
+	const open = tasks.filter((task) => task.status === "queued").length;
+
+	const counts = [`${done} done`];
+	if (dead) counts.push(`${dead} failed`);
+	counts.push(`${inProgress} in progress`, `${open} open`);
+	const headerParts = [`● ${tasks.length} tasks (${counts.join(", ")})`];
+	if (runs.length > 1) headerParts.push(shortRunLabel(entry.run));
+	const lines = [truncate(headerParts.join(" · "), width)];
+
+	const visible = visibleTasks(tasks);
+	for (const task of visible) {
+		lines.push(taskRow(task, numberById.get(task.id) ?? 0, tasks, numberById, width));
+	}
+	if (tasks.length > visible.length) {
+		lines.push(truncate(`  … and ${tasks.length - visible.length} more`, width));
+	}
+	return lines;
+}